MERN

⌘K
  1. Home
  2. Docs
  3. MERN
  4. page Routing

page Routing

for example create a blog page and url is localhost:3000/blog how create file and folder for a blog

Step 1: Setup Your Next.js Project

First, ensure your Next.js project is ready. If you haven’t created one, here’s how you start:

# Create a new Next.js app
npx create-next-app my-next-app

# Navigate into the project directory
cd my-next-app
Bash

Step 2: Create the Blog Structure

  1. Create an App Directory: In your project’s root, create an app directory. This will hold your feature-based modules.
my-next-app/
└── app/
Bash

Step 3: Set up the Blog Page

Create a new file for your main blog page. This could be at app/blog/page.tsx and for now, it will be a simple component:

my-next-app/
└── app/
    └── blog/
Bash

then

// app/blog/page.tsx

const Blog = () => {
  return (
    <div>
      <h1>Blog</h1>
      {/* Here will be a list of blog posts once we integrate data fetching */}
    </div>
  );
};

export default Blog;
JavaScript

Create a new directory and file for individual blog posts based on the slug. The directory and file could be at app/blog/[slug]/page.tsx:

// app/blog/[slug]/page.tsx

import { useRouter } from 'next/router';

const BlogPost = () => {
  const router = useRouter();
  const { slug } = router.query; // Access the dynamic part of the URL

  return (
    <div>
      <h1>Post: {slug}</h1>
      {/* Post content will be rendered here after fetching data using slug */}
    </div>
  );
};

export default BlogPost;
JavaScript

How can we help?