How to Do App Routing in Next.js 14

Next.js 14 continues to enhance its powerful framework, providing developers with robust features for building React applications. One of the key aspects of any web application is routing, and Next.js makes it incredibly simple and efficient. In this post, we'll explore how to set up and use app routing in Next.js 14.

Introduction to Next.js Routing

Next.js uses a file-based routing system, which means the structure of your pages directory determines the routes of your application. Each file inside the pages directory becomes a route.

Basic Routing

To create a basic route, you simply need to add a new file to the pages directory. For example, if you create a file named about.js inside the pages directory, it will automatically be available at /about.

Example:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

Dynamic Routing

Next.js also supports dynamic routing using brackets ([]). This allows you to create routes with dynamic parameters.

Example:

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

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

  return (
    <div>
      <h1>Product {id}</h1>
    </div>
  );
}

In this example, a file named [id].js inside the pages/product directory creates a dynamic route that can be accessed via /product/1, /product/2, etc.

Nested Routes

Nested routes can be created by adding folders inside the pages directory. Each folder represents a part of the URL path.

Example:

// pages/blog/index.js
export default function Blog() {
  return (
    <div>
      <h1>Blog Home</h1>
    </div>
  );
}

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
    </div>
  );
}

In this setup, the /blog route will render index.js, and /blog/[slug] will render [slug].js.

API Routes

Next.js also supports API routes, allowing you to create backend endpoints in your application. These are placed in the pages/api directory.

Example:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

This file creates an API endpoint at /api/hello that responds with a JSON message.

Customizing the Router

Next.js 14 allows more customization and advanced routing strategies using the next/router package. You can programmatically navigate between pages and handle more complex routing scenarios.

Example:

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const navigateToAbout = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToAbout}>Go to About Page</button>
    </div>
  );
}

Conclusion

Next.js 14 continues to simplify and enhance the developer experience with its powerful and flexible routing system. Whether you need static, dynamic, or nested routes, Next.js makes it easy to set up and manage your application's navigation.

I hope this post helps you get started with routing in Next.js 14. If you have any questions or suggestions, feel free to leave a comment below!

Happy coding!