Introduction to Next.js Blog

Next.js is a popular React framework for building server-side rendered and statically generated websites and applications. In this tutorial, we will create a simple blog with Next.js.

Step 1: Create a New Next.js Project

To start, create a new Next.js project using the following command:

npx create-next-app my-blog
cd my-blog

Step 2: Create Pages

Create a new file called index.js in the pages directory. This will be the homepage of our blog:

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to my blog</h1>
      <p>
        <Link href="/posts">
          <a>View all posts</a>
        </Link>
      </p>
    </div>
  );
}

Step 3: Create a Posts Page

Create a new file called posts.js in the pages directory. This will display a list of all blog posts:

// pages/posts.js
import Link from 'next/link';

export default function Posts() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        <li>
          <Link href="/posts/first-post">
            <a>First Post</a>
          </Link>
        </li>
        <li>
          <Link href="/posts/second-post">
            <a>Second Post</a>
          </Link>
        </li>
      </ul>
    </div>
  );
}

Step 4: Create Individual Post Pages

Create a new file called [id].js in the pages/posts directory. This will display an individual blog post:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

return (
    <div>
      <h1>Post {id}</h1>
      <p>This is the content of post {id}.</p>
    </div>
  );
}