Social Networking Platform using Next.js

Last Updated : 22 Mar, 2024

The Social Networking Platform built with NextJS is a web application that provides users the functionality to add a post, like a post, and be able to comment on it. The power of NextJS, a popular React framework for building server-side rendered (SSR) and statically generated web applications, this platform offers a seamless user experience with fast loading times and smooth navigation.

Output Preview: Let us have a look at how the final output will look like

Screenshot-2024-03-20-000330

Prerequisites:

Approach to Create Social Networking Platform with NextJS:

Home Page: Displays recent posts fetched from the backend API.
Post Interaction: Users can like posts and add comments.
Create Post: Users can create new posts with a title, content, and optional image upload.
Backend API: Provides endpoints for fetching recent posts, creating posts, liking posts, and adding comments. Uses MongoDB as the database.

Steps to Create the NextJS App:

Step 1: Set up a NextJS project using the following command.

npx create-next-app next-mern-project
cd next-mern-project

Step 2: Install required dependencies.

npm install axios mongoose

Project Structure:

Screenshot-2024-03-19-235202

The updated dependencies in package.json file will look like:

 "dependencies": {
    "axios": "^1.6.8",
    "mongodb": "^6.5.0",
    "mongoose": "^8.2.2",
    "multer": "^1.4.5-lts.1",
    "next": "14.1.3",
    "next-connect": "^1.0.0",
    "react": "^18",
    "react-dom": "^18",
    "uuid": "^9.0.1"
  }

Step 3: Creating a required files.

Create components folder with Post.js
Inside api create file posts.js
inside pages create file _app.js,index.js and create.js
create globals.css inside style folder

Example: Below is an example of creating a Social Networking Platform with NextJS.

CSS

/* globals.css */

.home {
    max-width: 800px;
    margin: 0 auto;
}

.post {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
}

.post h3 {
    color: #333;
}

.post p {
    color: #555;
}

/* App.css */

.create-post {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.create-post h2 {
    color: #333;
}

.create-post input,
.create-post textarea {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
}

.create-post button {
    background-color: #4caf50;
    color: #fff;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
}

.comment-input {
    margin-top: 10px;
    padding: 8px;
    width: 70%;
}

.comment-button {
    background-color: #4caf50;
    color: #fff;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
}

.post img,
.post video {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

.post button {
    background-color: #4caf50;
    color: #fff;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}

.post ul {
    list-style: none;
    padding: 0;
}

.post li {
    margin-bottom: 5px;
}

.comment-input {
    margin-top: 10px;
    padding: 8px;
    width: 70%;
}

.comment-button {
    background-color: #4caf50;
    color: #fff;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
}


/* App.css */

.app {
    max-width: 800px;
    margin: 0 auto;
}

nav {
    background-color: #333;
    padding: 10px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline-block;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

nav a:hover {
    color: #4caf50;
}

.create-post,
.home {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.home h2,
.create-post h2 {
    color: #333;
}

.home .post,
.create-post {
    margin-bottom: 30px;
}

.home .post button,
.create-post button {
    background-color: #4caf50;
    color: #fff;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
}

.home .post button:hover,
.create-post button:hover {
    background-color: #45a049;
}

JavaScript

//pages/index.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Home() {
    const [posts, setPosts] = useState([]);
    const [commentText, setCommentText] = useState('');

    useEffect(() => {
        axios
            .get('/api/posts')
            .then((response) => setPosts(response.data))
            .catch((error) => console.error(
                'Error fetching posts:', error));
    }, []);

    const handleLike = async (id) => {
        try {
            const response = await axios.put('/api/posts', {
                id, action: 'like'
            });
            setPosts(posts.map(
                (post) => (post._id === id ? response.data : post)));
        } catch (error) {
            console.error('Error liking post:', error);
        }
    };

    const handleComment = async (id, text) => {
        try {
            const response = await axios.put('/api/posts', {
                id, action: 'comment', text
            });
            setPosts(posts.map(
                (post) => (post._id === id ? response.data : post)));
            setCommentText(''); // Reset comment text after posting
        } catch (error) {
            console.error('Error commenting on post:', error);
        }
    };

    const convertImageToBase64 = async (file) => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = (error) => reject(error);
        });
    };

    return (
        <div className="home">
            <h2>Recent Posts</h2>
            {posts.map((post) => (
                <div key={post._id} className="post">
                    <h3>{post.title}</h3>
                    <p>{post.content}</p>
                    {post.file && (
                        <div>
                            <img src={post.file} alt="Post" />
                        </div>
                    )}
                    <p>Likes: {post.likes}</p>
                    <button onClick={() => handleLike(post._id)}>
                        Like
                    </button>
                    <p>Comments: {post.comments.length}</p>
                    <ul>
                        {post.comments.map((comment, index) => (
                            <li key={index}>{comment.text}</li>
                        ))}
                    </ul>
                    <div>
                        <input type="text" placeholder="Write a comment..."
                            value={commentText}
                            onChange={(e) => setCommentText(e.target.value)} />
                        <button
                            onClick={() => handleComment(post._id, commentText)}>
                            Comment
                        </button>
                    </div>
                </div>
            ))}
        </div>
    );
}

export default Home;

JavaScript

// pages/_app.js

import '../styles/globals.css';
import React from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
    const router = useRouter();

    return (
        <div className="app">
            <nav>
                <ul>
                    <li>
                        <button onClick={() => router.push('/')}>
                            Home
                        </button>
                    </li>
                    <li>
                        <button onClick={() => router.push('/create')}>
                            Create Post
                        </button>
                    </li>
                </ul>
            </nav>
            <Component {...pageProps} />
        </div>
    );
}

export default MyApp;

JavaScript

// pages/create.js

import React, { useState } from 'react';
import axios from 'axios';

function CreatePost() {
    const [newPost, setNewPost] = useState({
        title: '',
        content: '',
        file: null
    });
    const [error, setError] = useState('');

    const handleInputChange = event => {
        const { name, value } = event.target;
        setNewPost({ ...newPost, [name]: value });
    };

    const handleFileChange = event => {
        setNewPost({
            ...newPost,
            file: event.target.files[0]
        });
    };

    const handlePostSubmit = async () => {
        try {
            const { title, content, file } = newPost;

            if (!title || !content) {
                setError('Title and content are required fields.');
                return;
            }

            const postData = { title, content };

            const response = await axios.post('/api/posts',
                postData);
            console.log('Post created:', response.data);
            setNewPost({ title: '', content: '', file: null });
            setError('');
        } catch (error) {
            console.error('Error creating post:', error);
            setError('Error creating post. Please try again.');
        }
    };


    return (
        <div className="create-post">
            <h2>Create a Post</h2>
            {error && <p style={{ color: 'red' }}>{error}</p>}
            <input type="text" name="title"
                placeholder="Title" value={newPost.title}
                onChange={handleInputChange} />
            <textarea name="content"
                placeholder="Content" value={newPost.content}
                onChange={handleInputChange}>
            </textarea>
            <input type="file" name="file"
                accept="image/*" onChange={handleFileChange} />
            <button onClick={handlePostSubmit}>
                Post
            </button>
        </div>
    );
}

export default CreatePost;

JavaScript

//pages/api/posts.js
import mongoose from 'mongoose';

// MongoDB connection URI
const MONGODB_URI = 'Your Mongo Database URL Here';

// Connect to MongoDB
mongoose.connect(MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

// Define post schema
const postSchema = new mongoose.Schema({
    title: String,
    content: String,
    file: String,
    likes: { type: Number, default: 0 },
    comments: [{ text: String }]
});

// Define Post model
const Post = mongoose.models.Post || mongoose.model('Post', postSchema);

// Export API handler
export default async function handler(req, res) {
    if (req.method === 'GET') {
        try {
            const posts = await Post.find();
            res.status(200).json(posts);
        } catch (error) {
            res.status(500).json({
                error: 'Internal Server Error'
            });
        }
    } else if (req.method === 'POST') {
        try {
            const { title, content, file } = req.body;

            if (!title || !content) {
                return res.status(400).json({
                    error: 'Title and content are required fields'
                });
            }

            const post = new Post({ title, content, file });
            await post.save();
            res.status(201).json(post);
        } catch (error) {
            console.error('Error creating post:', error);
            res.status(500).json({
                error: 'Internal Server Error'
            });
        }
    } else if (req.method === 'PUT') {
        try {
            const { id, action } = req.body;

            if (!id || !action) {
                return res.status(400).json({
                    error: 'Post ID and action are required'
                });
            }

            let updatedPost;

            if (action === 'like') {
                updatedPost = await Post.findByIdAndUpdate(id,
                    { $inc: { likes: 1 } }, { new: true });
            } else if (action === 'comment') {
                const { text } = req.body;
                if (!text) {
                    return res.status(400).json({
                        error: 'Comment text is required'
                    });
                }
                updatedPost = await Post.findByIdAndUpdate(id,
                    { $push: { comments: { text } } }, { new: true });
            } else {
                return res.status(400).json({
                    error: 'Invalid action'
                });
            }

            res.status(200).json(updatedPost);
        } catch (error) {
            console.error('Error updating post:', error);
            res.status(500).json({
                error: 'Internal Server Error'
            });
        }
    } else {
        res.status(405).end(); // Method Not Allowed
    }
}

JavaScript

// components/Post.js

import React, { useState } from 'react';
import axios from 'axios';

function Post({ post }) {
    const [commentInput, setCommentInput] = useState('');

    const handleLike = postId => {
        axios.post(`/api/posts/like/${postId}`)
            .then(response => {
                // Handle updated post data
            })
            .catch(
                error => console.error('Error liking post:', error));
    };

    const handleAddComment = (postId, commentText) => {
        axios.post(`/api/posts/comment/${postId}`,
            { text: commentText })
            .then(response => {
                // Handle updated post data
            })
            .catch(
                error => console.error('Error adding comment:', error));
    };

    return (
        <div className="post">
            <h3>{post.title}</h3>
            <p>{post.content}</p>
            {post.file && (
                <div>
                    <img src={`/uploads/${post.file}`}
                        alt="Post Media" />
                </div>
            )}
            <p>Likes: {post.likes}</p>
            <button
                onClick={() => handleLike(post._id)}>
                Like
            </button>
            <p>Comments: {post.comments.length}</p>
            <ul>
                {post.comments.map((comment, index) => (
                    <li key={index}>{comment.text}</li>
                ))}
            </ul>
            <input type="text" placeholder="Add a comment"
                className="comment-input"
                onChange={(e) => setCommentInput(e.target.value)} />
            <button
                onClick={() => handleAddComment(post._id, commentInput)}
                className="comment-button">
                Add Comment
            </button>
        </div>
    );
}

export default Post;