Building a Modern Blogging Platform with Next.js and MongoDB

Creating a blogging platform from scratch offers immense flexibility and control over your content and user experience. While many content management systems (CMS) exist, building your own allows for tailored features and deep understanding of the underlying technology. For a modern, performant, and scalable blogging solution, the combination of Next.js for the frontend and MongoDB for the database is an excellent choice.

This comprehensive guide will walk you through the process of setting up and developing a basic blogging platform using Next.js for server-side rendering (SSR) or static site generation (SSG) and MongoDB for flexible data storage.

Why Next.js for the Frontend?

Next.js is a React framework that enables powerful features for building production-ready web applications. It's particularly well-suited for blogging platforms due to:

Server-Side Rendering (SSR) & Static Site Generation (SSG): Crucial for SEO (Search Engine Optimization) and initial page load performance. Blog posts, being largely static content, can benefit immensely from SSG, pre-rendering pages at build time.
API Routes: Next.js allows you to create API endpoints directly within your project, eliminating the need for a separate Express.js server for simple backend tasks. This creates a unified development experience.
File-system Based Routing: Pages are automatically routed based on the file structure in the `pages` directory, simplifying navigation setup.
Image Optimization: Built-in features for optimizing images, leading to faster loading times for media-rich blog posts.

Why MongoDB for the Database?

MongoDB is a popular NoSQL database that stores data in flexible, JSON-like documents. It's an excellent fit for blogging platforms because:

Flexible Schema: Blog posts can have varying fields (e.g., some might have a subtitle, others not). MongoDB's schemaless nature allows for this flexibility without strict table definitions.
Scalability: Designed for horizontal scaling, making it suitable for applications that might grow to handle a large number of posts and users.
JSON-like Documents: Data is stored in BSON (Binary JSON) format, which maps directly to JavaScript objects, making it very intuitive to work with in a Node.js/Next.js environment.
Rich Query Language: Supports powerful query capabilities for retrieving and manipulating data.

Project Setup: Next.js and MongoDB

Let's start by setting up our Next.js project and connecting it to a MongoDB database.

1. Initialize Next.js Project

Open your terminal and create a new Next.js application:

npx create-next-app blog-platform --ts # Or without --ts for JavaScript
cd blog-platform
npm install mongoose

`mongoose`: An ODM (Object Data Modeling) library for MongoDB and Node.js, simplifying interactions with the database.

2. Configure MongoDB Connection

Create a `.env.local` file in the root of your `blog-platform` project and add your MongoDB connection string. If you don't have one, you can get a free cluster from MongoDB Atlas.

MONGODB_URI=mongodb+srv://<username>:<password>@<cluster-url>/<dbname>?retryWrites=true&w=majority

Next, create a utility file for your MongoDB connection. This pattern ensures you have a single, reusable connection instance.

Create `lib/mongodb.js` (or `lib/mongodb.ts` if using TypeScript):

// lib/mongodb.js

import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error(
    'Please define the MONGODB_URI environment variable inside .env.local'
  );
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    const opts = {
      bufferCommands: false,
    };

    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
      return mongoose;
    });
  }
  cached.conn = await cached.promise;
  return cached.conn;
}

export default dbConnect;

3. Define a Mongoose Schema for Blog Posts

Create `models/Post.js` (or `models/Post.ts`):

// models/Post.js

import mongoose from 'mongoose';

const PostSchema = new mongoose.Schema({
  title: {
    type: String,
    required: [true, 'Please provide a title for this post.'],
    maxlength: [60, 'Title cannot be more than 60 characters'],
  },
  content: {
    type: String,
    required: [true, 'Please provide content for this post.'],
  },
  author: {
    type: String,
    required: [true, 'Please provide an author for this post.'],
    maxlength: [30, 'Author name cannot be more than 30 characters'],
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

export default mongoose.models.Post || mongoose.model('Post', PostSchema);

Creating API Routes with Next.js

Next.js API Routes allow you to build your backend API directly within your Next.js project. They reside in the `pages/api` directory.

1. Get All Posts & Create New Post (`pages/api/posts.js`)

Create `pages/api/posts.js`:

// pages/api/posts.js

import dbConnect from '../../lib/mongodb';
import Post from '../../models/Post';

export default async function handler(req, res) {
  await dbConnect();

  const { method } = req;

  switch (method) {
    case 'GET':
      try {
        const posts = await Post.find({});
        res.status(200).json({ success: true, data: posts });
      } catch (error) {
        res.status(400).json({ success: false, error: error.message });
      }
      break;
    case 'POST':
      try {
        const post = await Post.create(req.body);
        res.status(201).json({ success: true, data: post });
      } catch (error) {
        res.status(400).json({ success: false, error: error.message });
      }
      break;
    default:
      res.status(400).json({ success: false, message: 'Method not allowed' });
      break;
  }
}

Explanation of `pages/api/posts.js`:

`dbConnect()`: Ensures a connection to MongoDB is established.
`req.method`: Checks the HTTP method (GET, POST, etc.) to determine the action.
`Post.find({})`: Retrieves all posts from the database.
`Post.create(req.body)`: Creates a new post using data from the request body.

Frontend Development: Displaying and Creating Posts

Now, let's build the React components in Next.js to interact with our API.

1. Displaying All Posts (`pages/index.js`)

Modify `pages/index.js` to fetch and display posts:

// pages/index.js

import Head from 'next/head';
import { useState, useEffect } from 'react';

export default function Home() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const res = await fetch('/api/posts');
        const data = await res.json();

        if (data.success) {
          setPosts(data.data);
        } else {
          setError(data.error || 'Failed to fetch posts');
        }
      } catch (err) {
        setError(err.message || 'Network error');
      } finally {
        setLoading(false);
      }
    };
    fetchPosts();
  }, []);

  return (
    <div style={{
      fontFamily: 'Open Sans, sans-serif',
      textAlign: 'center',
      padding: '40px',
      backgroundColor: '#f0f2f5',
      minHeight: '100vh',
      boxSizing: 'border-box'
    }}>
      <Head>
        <title>My Awesome Blog</title>
        <meta name="description" content="A simple blogging platform built with Next.js and MongoDB" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main style={{
        backgroundColor: '#fff',
        padding: '30px',
        borderRadius: '10px',
        boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
        maxWidth: '800px',
        margin: '0 auto',
        boxSizing: 'border-box'
      }}>
        <h1 style={{
          fontFamily: 'Merriweather, serif',
          fontSize: '2.2em',
          color: '#222',
          marginBottom: '30px',
          boxSizing: 'border-box'
        }}>Latest Blog Posts</h1>

        {loading && <p style={{color: '#007bff', boxSizing: 'border-box'}}>Loading posts...</p>}
        {error && <p style={{color: 'red', boxSizing: 'border-box'}}>Error: {error}</p>}

        <div style={{display: 'grid', gridTemplateColumns: '1fr', gap: '20px', boxSizing: 'border-box'}}>
          {posts.length > 0 ? (
            posts.map((post) => (
              <div key={post._id} style={{
                border: '1px solid #eee',
                borderRadius: '8px',
                padding: '20px',
                textAlign: 'left',
                boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
                boxSizing: 'border-box'
              }}>
                <h2 style={{fontFamily: 'Merriweather, serif', fontSize: '1.5em', color: '#c00', marginBottom: '10px', boxSizing: 'border-box'}}>{post.title}</h2>
                <p style={{fontSize: '0.95em', color: '#555', marginBottom: '15px', boxSizing: 'border-box'}}>{post.content.substring(0, 150)}...</p>
                <p style={{fontSize: '0.85em', color: '#777', boxSizing: 'border-box'}}>By {post.author} on {new Date(post.createdAt).toLocaleDateString()}</p>
                <a href={`/posts/${post._id}`} style={{
                  display: 'inline-block',
                  marginTop: '15px',
                  backgroundColor: '#007bff',
                  color: '#fff',
                  padding: '8px 15px',
                  borderRadius: '5px',
                  textDecoration: 'none',
                  fontSize: '0.9em',
                  boxSizing: 'border-box'
                }}>Read More</a>
              </div>
            ))
          ) : (
            !loading && !error && <p style={{color: '#555', boxSizing: 'border-box'}}>No posts found. Be the first to create one!</p>
          )}
        </div>
      </main>
    </div>
  );
}

Explanation of `pages/index.js`:

`useEffect`: Fetches posts from `/api/posts` when the component mounts.
State Management: `useState` hooks manage `posts`, `loading`, and `error` states.
Mapping Posts: Iterates through the `posts` array and renders a `div` for each post.
`substring`: Used to show a truncated preview of the post content.

2. Creating a New Post (`pages/create.js`)

Create `pages/create.js` for a form to add new blog posts:

// pages/create.js

import Head from 'next/head';
import { useState } from 'react';
import { useRouter } from 'next/router';

export default function CreatePost() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [author, setAuthor] = useState('');
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setMessage('');

    try {
      const res = await fetch('/api/posts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ title, content, author }),
      });

      const data = await res.json();

      if (data.success) {
        setMessage('Post created successfully!');
        setTitle('');
        setContent('');
        setAuthor('');
        router.push('/'); // Redirect to homepage after successful creation
      } else {
        setMessage(`Error: ${data.error || 'Failed to create post'}`);
      }
    } catch (error) {
      setMessage(`Network error: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      fontFamily: 'Open Sans, sans-serif',
      textAlign: 'center',
      padding: '40px',
      backgroundColor: '#f0f2f5',
      minHeight: '100vh',
      boxSizing: 'border-box'
    }}>
      <Head>
        <title>Create New Post</title>
      </Head>

      <main style={{
        backgroundColor: '#fff',
        padding: '30px',
        borderRadius: '10px',
        boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
        maxWidth: '600px',
        margin: '0 auto',
        boxSizing: 'border-box'
      }}>
        <h1 style={{
          fontFamily: 'Merriweather, serif',
          fontSize: '2.2em',
          color: '#222',
          marginBottom: '30px',
          boxSizing: 'border-box'
        }}>Create New Blog Post</h1>

        <form onSubmit={handleSubmit} style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '15px',
          textAlign: 'left',
          boxSizing: 'border-box'
        }}>
          <div style={{boxSizing: 'border-box'}}>
            <label htmlFor="title" style={{display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#555', boxSizing: 'border-box'}}>Title:</label>
            <input
              type="text"
              id="title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              required
              style={{
                width: '100%',
                padding: '10px',
                border: '1px solid #ddd',
                borderRadius: '5px',
                boxSizing: 'border-box'
              }}
            />
          </div>

          <div style={{boxSizing: 'border-box'}}>
            <label htmlFor="content" style={{display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#555', boxSizing: 'border-box'}}>Content:</label>
            <textarea
              id="content"
              value={content}
              onChange={(e) => setContent(e.target.value)}
              required
              rows="10"
              style={{
                width: '100%',
                padding: '10px',
                border: '1px solid #ddd',
                borderRadius: '5px',
                resize: 'vertical',
                boxSizing: 'border-box'
              }}
            ></textarea>
          </div>

          <div style={{boxSizing: 'border-box'}}>
            <label htmlFor="author" style={{display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#555', boxSizing: 'border-sizing'}}>Author:</label>
            <input
              type="text"
              id="author"
              value={author}
              onChange={(e) => setAuthor(e.target.value)}
              required
              style={{
                width: '100%',
                padding: '10px',
                border: '1px solid #ddd',
                borderRadius: '5px',
                boxSizing: 'border-box'
              }}
            />
          </div>

          <button type="submit" disabled={loading} style={{
            backgroundColor: loading ? '#ccc' : '#28a745',
            color: '#fff',
            padding: '12px 25px',
            border: 'none',
            borderRadius: '8px',
            cursor: loading ? 'not-allowed' : 'pointer',
            fontSize: '1em',
            fontWeight: 'bold',
            transition: 'background-color 0.3s ease',
            boxShadow: '0 2px 5px rgba(0,0,0,0.2)',
            boxSizing: 'border-box'
          }}>
            {loading ? 'Submitting...' : 'Create Post'}
          </button>
        </form>

        {message && (
          <p style={{
            marginTop: '20px',
            color: message.includes('Error') ? 'red' : 'green',
            fontSize: '1em',
            boxSizing: 'border-box'
          }}>
            {message}
          </p>
        )}
      </main>
    </div>
  );
}

Explanation of `pages/create.js`:

`useState`: Manages form input values (`title`, `content`, `author`), submission `loading` state, and `message` feedback.
`useRouter`: Hook from Next.js to programmatically navigate after successful post creation.
`handleSubmit`: Asynchronous function that sends a POST request to `/api/posts` with the form data.
JSON.stringify(req.body): Converts the JavaScript object to a JSON string for the request body.

3. Displaying a Single Post (`pages/posts/[id].js`)

Create `pages/posts/[id].js` for individual post pages. The `[id]` syntax indicates a dynamic route.

// pages/posts/[id].js

import Head from 'next/head';
import dbConnect from '../../lib/mongodb';
import Post from '../../models/Post';

export default function PostPage({ post }) {
  if (!post) {
    return (
      <div style={{
        fontFamily: 'Open Sans, sans-serif',
        textAlign: 'center',
        padding: '40px',
        backgroundColor: '#f0f2f5',
        minHeight: '100vh',
        boxSizing: 'border-box'
      }}>
        <p style={{color: 'red', fontSize: '1.2em', boxSizing: 'border-box'}}>Post not found.</p>
      </div>
    );
  }

  return (
    <div style={{
      fontFamily: 'Open Sans, sans-serif',
      textAlign: 'center',
      padding: '40px',
      backgroundColor: '#f0f2f5',
      minHeight: '100vh',
      boxSizing: 'border-box'
    }}>
      <Head>
        <title>{post.title} - My Awesome Blog</title>
      </Head>

      <main style={{
        backgroundColor: '#fff',
        padding: '30px',
        borderRadius: '10px',
        boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
        maxWidth: '800px',
        margin: '0 auto',
        textAlign: 'left',
        boxSizing: 'border-box'
      }}>
        <h1 style={{fontFamily: 'Merriweather, serif', fontSize: '2em', color: '#222', marginBottom: '10px', boxSizing: 'border-box'}}>{post.title}</h1>
        <p style={{fontSize: '0.9em', color: '#777', marginBottom: '20px', borderBottom: '1px solid #eee', paddingBottom: '10px', boxSizing: 'border-box'}}>
          By {post.author} on {new Date(post.createdAt).toLocaleDateString()}
        </p>
        <p style={{fontSize: '1.05em', color: '#444', lineHeight: '1.7', whiteSpace: 'pre-wrap', boxSizing: 'border-box'}}>{post.content}</p>
        <a href="/" style={{
          display: 'inline-block',
          marginTop: '30px',
          backgroundColor: '#007bff',
          color: '#fff',
          padding: '10px 20px',
          borderRadius: '8px',
          textDecoration: 'none',
          fontSize: '1em',
          boxSizing: 'border-box'
        }}>Back to all posts</a>
      </main>
    </div>
  );
}

// getServerSideProps is used for server-side rendering
export async function getServerSideProps(context) {
  await dbConnect();
  const { id } = context.params;

  try {
    const post = await Post.findById(id).lean(); // .lean() for plain JS objects

    // Convert _id and createdAt to string for serialization
    const serializedPost = post ? {
      ...post,
      _id: post._id.toString(),
      createdAt: post.createdAt.toISOString(),
    } : null;

    return { props: { post: serializedPost } };
  } catch (error) {
    console.error('Error fetching post:', error);
    return { props: { post: null } };
  }
}

Explanation of `pages/posts/[id].js`:

`getServerSideProps(context)`: This Next.js function runs on the server for every request to this page. It fetches the post data using the `id` from the URL parameters (`context.params.id`).
`Post.findById(id)`: Retrieves a single post from MongoDB by its ID.
Serialization: MongoDB `_id` and `Date` objects need to be converted to strings before being passed as props to the React component, as Next.js requires props to be serializable JSON.

Running Your Blogging Platform

After setting up all the files, you can run your Next.js application:

npm run dev

Your blogging platform will typically be available at `http://localhost:3000`. You can navigate to `/create` to add new posts and see them appear on the homepage.

Conclusion

Building a blogging platform with Next.js and MongoDB provides a robust, performant, and flexible foundation. Next.js handles the complexities of server-side rendering and API routes, while MongoDB offers a scalable and adaptable database solution for your content. This combination empowers you to create a modern and efficient platform tailored to your specific needs, with excellent SEO and user experience out-of-the-box.

How to Build a Blogging Platform with Next.js and MongoDB (Full Stack Guide)