NextJs - React Framework - Routing Introduction

Screenshot from the tutorial

Introduction to Routing in Next.js: A Comprehensive Guide

Next.js is a powerful React framework that simplifies the process of building server-rendered applications. One of its key features is its intuitive routing system, which enables developers to create dynamic, user-friendly navigation within their applications. In this blog post, we’ll explore the fundamentals of routing in Next.js, helping you get started in just a few minutes.

What is Routing in Next.js?

Routing in Next.js allows you to define the navigation structure of your application. It is based on the file system, meaning that the pages you create correspond directly to the directory structure in your project. This makes it easy to manage routes without the need for complex configurations.

Setting Up Next.js

Before diving into routing, let’s ensure you have a Next.js application set up. If you haven't already installed Next.js, follow these steps:

1. Install Node.js if you haven't done so. You can download it from Node.js official website.

2. Create a new Next.js application using the following command:

   npx create-next-app my-next-app
   

3. Navigate to your project folder:

   cd my-next-app
   

4. Start the development server:

   npm run dev
   

   Your Next.js application should now be running at http://localhost:3000.

Understanding the Pages Directory

In Next.js, the pages directory is where the routing magic happens. Each file inside this directory automatically becomes a route in your application.

Example Structure

Here’s a simple example of how you can structure your pages directory:

/pages
  ├── index.js          // Renders at '/'
  ├── about.js          // Renders at '/about'
  └── blog
      ├── index.js      // Renders at '/blog'
      └── [id].js       // Dynamic route: Renders at '/blog/:id'

Creating Static Routes

To create a static route, simply add a new JavaScript file within the pages directory. For instance, to create an "About" page:

pages/about.js

export default function About() {
  return <h1>About Us</h1>;
}

Navigating to http://localhost:3000/about will now display the "About Us" heading.

Creating Nested Routes

You can create nested routes by creating subdirectories within the pages directory. For example, if you want to create a blog section with its own index page, you would create a folder named blog:

pages/blog/index.js

export default function Blog() {
  return <h1>Welcome to the Blog</h1>;
}

Navigating to http://localhost:3000/blog will show the "Welcome to the Blog" heading.

Dynamic Routing

Next.js also supports dynamic routing, allowing you to create routes that can handle variable segments. This is done using square brackets in the file name.

Example of Dynamic Route

To create a dynamic blog post route, you can use the following structure:

pages/blog/[id].js

import { useRouter } from 'next/router';

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

  return <h1>Blog Post: {id}</h1>;
}

Now, navigating to http://localhost:3000/blog/1 or http://localhost:3000/blog/abc will display "Blog Post: 1" or "Blog Post: abc," respectively.

Link Component for Navigation

To navigate between different routes, Next.js provides a built-in Link component. This component enables client-side navigation, improving the performance of your application.

Example Usage of Link

Here’s how you can use the Link component to navigate between your pages:

pages/index.js

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">Go to About</Link>
      <Link href="/blog">Go to Blog</Link>
    </div>
  );
}

This will create links on the home page that navigate to the about page and the blog section seamlessly.

Conclusion

Routing in Next.js is straightforward and intuitive, allowing developers to create both static and dynamic routes with ease. By leveraging the file system, Next.js simplifies the management of application routes, making it an excellent choice for building modern web applications.

In just a few minutes, you've learned how to set up routing in a Next.js application, create static and dynamic routes, and implement navigation with the Link component. As you continue to explore Next.js, you'll find that its routing capabilities are just one of the many powerful features it offers.

For further learning, consider diving deeper into Next.js documentation or experimenting with advanced routing techniques. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios