Next.js Routing

Example: Building a Simple Blog with Basic Routing

Building a Simple Blog with Basic Routing in Next.js using the app directory is a great way to solidify your understanding of file-based routing. We'll create a basic blog structure, focusing on creating pages, linking between them, and understanding how Next.js uses files and folders to define routes. This example will build upon the concepts of page.js and layout.js that we covered in the previous lessons.

Setting up the Project Structure

First, let's outline the file structure for our simple blog:

app/
  layout.js       # Root layout for the entire application
  page.js         # Home page of the blog
  blog/
    layout.js     # Layout specific to the blog section
    page.js       # Blog listing page
    first-post/
      page.js     # Content of the first blog post
    second-post/
      page.js    # Content of the second blog post

This structure will give us the following routes:

/: The home page.
/blog: The blog listing page.
/blog/first-post: The first blog post.
/blog/second-post: The second blog post.

Creating the Root Layout (`app/layout.js`)

The root layout will provide a consistent UI across the entire application.

// app/layout.js
import './globals.css'; // Assuming you have a global stylesheet

export const metadata = {
  title: 'My Simple Blog',
  description: 'A basic blog built with Next.js',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>
          <a href="/">Home</a> | <a href="/blog">Blog</a>
        </nav>
        <main>{children}</main>
        <footer>
          <p>&copy; 2024 My Simple Blog</p>
        </footer>
      </body>
    </html>
  )
}

This code defines the basic HTML structure, includes a simple navigation bar with links to the home page and blog listing page, renders the content of each page within the <main> tag, and adds a footer. The metadata object defines the title and description for the entire application, which is important for SEO.

Creating the Home Page (`app/page.js`)

The home page will be a simple welcome message.

// app/page.js
export default function Home() {
  return (
    <div>
      <h1>Welcome to My Simple Blog!</h1>
      <p>This is the home page.</p>
    </div>
  );
}

This creates a basic home page with a heading and a paragraph.

Creating the Blog Layout (`app/blog/layout.js`)

The blog layout will provide a consistent UI for all blog-related pages.

// app/blog/layout.js
import Link from 'next/link';

export default function BlogLayout({ children }) {
  return (
    <section>
      <nav>
        <Link href="/blog">Back to Blog Listing</Link>
      </nav>
      {children}
    </section>
  );
}

This layout adds a navigation link to go back to the blog listing page. It wraps the content of individual blog posts. We're using the <Link> component from next/link for client-side navigation, which we discussed in the previous lesson.

Creating the Blog Listing Page (`app/blog/page.js`)

The blog listing page will display links to the individual blog posts.

// app/blog/page.js
import Link from 'next/link';

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

This code creates a list of links to the individual blog posts. Again, we're using the <Link> component for efficient navigation.

Creating the Blog Post Pages (`app/blog/first-post/page.js` and `app/blog/second-post/page.js`)

These pages will contain the content of the individual blog posts.

// app/blog/first-post/page.js
export default function FirstPost() {
  return (
    <div>
      <h1>First Post</h1>
      <p>This is the content of the first blog post.</p>
    </div>
  );
}

// app/blog/second-post/page.js
export default function SecondPost() {
  return (
    <div>
      <h1>Second Post</h1>
      <p>This is the content of the second blog post.</p>
    </div>
  );
}

These are simple pages with a heading and some content.

Next.js 15 Routing Explained in Simple Terms (With Examples)

Table of contents

Example: Building a Simple Blog with Basic Routing

Setting up the Project Structure

Creating the Root Layout (`app/layout.js`)

Creating the Home Page (`app/page.js`)

Creating the Blog Layout (`app/blog/layout.js`)

Creating the Blog Listing Page (`app/blog/page.js`)

Creating the Blog Post Pages (`app/blog/first-post/page.js` and `app/blog/second-post/page.js`)

Subscribe to my newsletter

Satyam Garg

Satyam Garg

Next.js 15 Routing Explained in Simple Terms (With Examples)

Table of contents

Example: Building a Simple Blog with Basic Routing

Setting up the Project Structure

Creating the Root Layout (app/layout.js)

Creating the Home Page (app/page.js)

Creating the Blog Layout (app/blog/layout.js)

Creating the Blog Listing Page (app/blog/page.js)

Creating the Blog Post Pages (app/blog/first-post/page.js and app/blog/second-post/page.js)

Subscribe to my newsletter

Satyam Garg

Satyam Garg

Creating the Root Layout (`app/layout.js`)

Creating the Home Page (`app/page.js`)

Creating the Blog Layout (`app/blog/layout.js`)

Creating the Blog Listing Page (`app/blog/page.js`)

Creating the Blog Post Pages (`app/blog/first-post/page.js` and `app/blog/second-post/page.js`)