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
Step 2: Create the Blog Structure
- Create an App Directory: In your project’s root, create an
appdirectory. This will hold your feature-based modules.
my-next-app/
└── app/
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/
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;
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;