File System Routing

File System Routing is a core concept in Next.js that allows developers to define application routes based on the file system structure of the pages directory. This feature simplifies routing management and enhances developer productivity by eliminating the need for manual route configuration.

Understanding File System Routing

In Next.js, each file inside the pages directory automatically becomes a route. For example:

• pages/index.js → /
• pages/about.js → /about
• pages/blog/first-post.js → /blog/first-post

This routing system is intuitive and aligns with the concept of "convention over configuration," making it easier to manage routes as your application grows.

Dynamic Routes

Next.js supports dynamic routes, allowing you to define pages that can handle multiple paths. Dynamic routes are created by adding brackets [] around a segment in the file name:

Basic Dynamic Route

Create a file named [id].js inside the pages/blog directory:

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

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

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

This setup will match any route like /blog/1, /blog/2, etc., and the id parameter can be accessed using router.query.

Nested Dynamic Routes

You can also have nested dynamic routes. For example, create a file named [slug].js inside the pages/blog/[id] directory:

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

export default function BlogPostDetail() {
  const router = useRouter();
  const { id, slug } = router.query;

  return <div>Blog Post Detail: {id} - {slug}</div>;
}

This will match routes like /blog/1/introduction and allow you to access both id and slug.

Catch-All Routes

Catch-all routes can be used to match any number of segments in a route. They are defined by adding three dots ... inside the brackets:

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

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

  return <div>Blog Post Detail: {slug.join(' - ')}</div>;
}

This will match routes like /blog/1/introduction/details and slug will be an array containing ['1', 'introduction', 'details'].

Predefined Routes

Sometimes, you might want to define a set of predefined routes. This can be achieved by creating multiple files with the same name but different extensions:

// pages/blog/[id].js
export default function BlogPost() {
  return <div>Blog Post</div>;
}

// pages/blog/[id].html
export default function BlogPostHTML() {
  return <div>Blog Post (HTML)</div>;
}

This setup allows you to handle different content types for the same route.

API Routes

Next.js also supports API routes, which are files inside the pages/api directory. These files become endpoints that can be accessed via HTTP requests:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}

This will create an API endpoint at /api/hello that returns a JSON response.

Best Practices

1. Organize Your Files: Keep your pages directory organized to maintain clarity and ease of navigation.
2. Use Dynamic Routes Sparingly: While dynamic routes are powerful, overusing them can lead to complex routing logic. Use them only when necessary.
3. Handle 404 Pages: Create a custom 404 page by adding 404.js inside the pages directory to provide a better user experience.
4. Optimize for SEO: Ensure that your routes are optimized for search engines by using descriptive URLs and meta tags.

Conclusion

File System Routing is a fundamental feature in Next.js that simplifies routing management and enhances developer productivity. By understanding how to use static, dynamic, and catch-all routes, as well as API routes, you can build robust and scalable applications with ease.