Building a Social Networking App with Next.js

Introduction

A social networking app connects users, allowing them to share posts, follow others, and engage in discussions. In this tutorial, we'll provide an overview of building a basic social networking app using Next.js. We'll cover project setup, user registration, posting, following, and displaying posts. In a real-world social networking app, you'd implement advanced features like user profiles, comments, and notifications.

Setting Up the Project

Ensure you have Node.js and npm installed on your system. If not, download and install them from the official website.

Create a new Next.js project using the following commands:

        npx create-next-app social-network
cd social-network
            

User Registration

Users can register and log in to use the app. For simplicity, we'll use a mock authentication system in this example.

        <!-- pages/login.js -->
import React, { useState } from 'react';
export default function Login() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [loggedIn, setLoggedIn] = useState(false);
    const handleLogin = () => {
        // Simulated login logic
        if (username === 'user' && password === 'password') {
            setLoggedIn(true);
        }
    };
    return (
        <div>
            <h2>Login</h2>
            <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
            <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button onClick={handleLogin}>Login</button>
        </div>
    );
}
            

Posting

Users can create and post messages or updates.

        <!-- pages/create-post.js -->
import React, { useState } from 'react';
export default function CreatePost() {
    const [postText, setPostText] = useState('');
    const [posts, setPosts] = useState([]);
    const handlePost = () => {
        const newPost = { text: postText };
        setPosts([...posts, newPost]);
        setPostText('');
    };
    return (
        <div>
            <h2>Create a Post</h2>
            <textarea
                placeholder="What's on your mind?"
                value={postText}
                onChange={(e) => setPostText(e.target.value)}
            ></textarea>
            <button onClick={handlePost}>Post</button>
        </div>
    );
}
            

Following

Users can follow each other to see posts from users they follow.

        <!-- pages/follow.js -->
import React, { useState } from 'react';
export default function Follow() {
    const [followedUsers, setFollowedUsers] = useState([]);
    const [suggestedUsers, setSuggestedUsers] = useState(['User1', 'User2', 'User3']);
    const followUser = (user) => {
        if (!followedUsers.includes(user)) {
            setFollowedUsers([...followedUsers, user]);
        }
    };
    return (
        <div>
            <h2>Follow Users</h2>
            <ul>
                {suggestedUsers.map((user) => (
                    <li key={user}>
                        {user}
                        <button onClick={() => followUser(user)}>Follow</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}
            

Displaying Posts

Posts from users you follow can be displayed on a feed.

        <!-- pages/feed.js -->
import React, { useState } from 'react';
export default function Feed({ followedUsers }) {
    const [posts, setPosts] = useState([
        { text: 'This is a sample post from User1' },
        { text: 'Another post from User2' },
    ]);
    return (
        <div>
            <h2>Feed</h2>
            <ul>
                {posts.map((post, index) => (
                    <li key={index}>{post.text}</li>
                ))}
            </ul>
        </div>
    );
}
            

Advanced Features

In a real-world social networking app, you would implement additional features such as user profiles, comments, likes, and notifications. You'd also need to handle user authentication securely and consider scalability for a large user base.

Conclusion

You've learned how to create a basic social networking app using Next.js, including project setup, user registration, posting, following, and displaying posts. In a real-world scenario, you would need to implement more advanced features, user profiles, comments, likes, and secure user authentication. You can customize and expand this foundation based on your specific social networking app requirements.