Nextjs Nested Routes And Optional Catch All Routes Complete Guide

Understanding Nested Routes

Nested routes in Next.js allow you to create a file-based routing structure where you can have parent and child routes. This is particularly useful when you have sections of your application that logically belong under a parent route.

Understanding Optional Catch-All Routes

Optional Catch-All routes capture the rest of the URL path if it matches the pattern, but they are not required to be present. This allows you to handle URLs dynamically and optionally.

Example 1: Basic Nested Routes

Let's create a simple blog application where:

• /blog shows a list of blog posts.
• /blog/[slug] shows an individual blog post based on the slug (URL fragment).

Project Setup

First, create a new Next.js project if you haven't already:

npx create-next-app@latest nextjs-blog
cd nextjs-blog

Step 1: Create Parent Route (/blog)

Create a pages/blog/index.js file which renders the blog list.

// pages/blog/index.js
export default function BlogIndex() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        <li>
          <a href="/blog/first-post">First Post</a>
        </li>
        <li>
          <a href="/blog/learn-nextjs">Learn Next.js</a>
        </li>
        <li>
          <a href="/blog/deploying-nextjs">Deploying Next.js</a>
        </li>
      </ul>
    </div>
  );
}

Step 2: Create Child Route (/blog/[slug])

Create a [slug].js file inside the pages/blog directory which will handle the rendering of individual blog posts. You can use getStaticPaths and getStaticProps to fetch data for each post. For simplicity, we'll mock the data.

// pages/blog/[slug].js
import { getBlogPostBySlug } from '../../lib/api';

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

// Get all slugs from your database or mock data
export async function getStaticPaths() {
  // Mocked static paths for demonstration purposes
  const paths = [
    { params: { slug: 'first-post' } },
    { params: { slug: 'learn-nextjs' } },
    { params: { slug: 'deploying-nextjs' } }
  ];

  return {
    paths,
    fallback: false
  };
}

// Fetch the data for the specific post based on the slug
export async function getStaticProps({ params }) {
  const { slug } = params;
  const post = getBlogPostBySlug(slug);

  return {
    props: {
      post
    }
  };
}

// Mocked API function to simulate fetching a blog post by slug
function getBlogPostBySlug(slug) {
  const posts = {
    'first-post': {
      title: 'The First Post',
      content: 'This is the first blog post.'
    },
    'learn-nextjs': {
      title: 'Learning Next.js',
      content: 'Next.js is great for building server-side rendered applications.'
    },
    'deploying-nextjs': {
      title: 'Deploying Next.js Applications',
      content: 'You can deploy Next.js apps using Vercel and other platforms.'
    }
  };

  return posts[slug];
}

Testing Nested Routes

Run your development server:

npm run dev

Navigate to:

• /blog to see the list of blog posts.
• /blog/first-post to see the content of the first post.
• /blog/learn-nextjs and /blog/deploying-nextjs similarly display their respective contents.

Example 2: Optional Catch-All Routes

Let's expand the blog application to include an optional catch-all route to handle blog categories dynamically. For example:

• /blog/category/[...category] should show all posts within a category.
• /blog/category/react and /blog/category/react/nextjs should be valid.
• If category doesn't exist, it should fallback to a more generic page.

Step 1: Create Categories Route

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

// pages/blog/category/[...category].js
import { getPostsByCategory } from '../../lib/api';

export default function BlogCategory({ posts, categoryPath = 'Default Category' }) {
  return (
    <div>
      <h1>Blog Posts for Category: {categoryPath}</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Fetch all possible categories from your database or mock data
export async function getStaticPaths() {
  // Mocked static paths for demonstration purposes
  const paths = [
    { params: { category: ['react'] } },
    { params: { category: ['react', 'nextjs'] } },
    { params: { category: ['other'] } }
  ];

  return {
    paths,
    fallback: true // Enable dynamic generation if needed
  };
}

// Fetch the data for the specific category based on the slug fragments
export async function getStaticProps({ params }) {
  const { category } = params;
  let categoryPath = category ? category.join(' > ') : 'Default Category';
  let posts = getPostsByCategory(category);

  // Fallback for non-existent categories
  if (!posts || posts.length === 0) {
    posts = [{ title: 'No posts found', slug: '' }];
    categoryPath = 'Default Category';
  }

  return {
    props: {
      posts,
      categoryPath
    }
  };
}

// Mocked API function to simulate fetching posts by category
function getPostsByCategory(categories) {
  const posts = {
    react: [
      {
        slug: 'react-hooks-intro',
        title: 'Introduction to React Hooks'
      },
      {
        slug: 'redux-with-react',
        title: 'Using Redux with React'
      }
    ],
    'react,nextjs': [
      {
        slug: 'using-nextjs-with-react',
        title: 'Combining Next.js with React'
      }
    ],
    other: [
      {
        slug: 'generic-post',
        title: 'Generic Post Title'
      }
    ]
  };

  return categories && categories.join(',') in posts ? posts[categories.join(',')] : [];
}

Step 2: Update getBlogPostBySlug and BlogIndex

To include links to the category routes, update your getBlogPostBySlug function to also store a category, and adjust the BlogIndex component to link to these routes.

// lib/api.js
export function getBlogPostBySlug(slug) {
  const postsWithCategories = {
    'first-post': {
      title: 'The First Post',
      content: 'This is the first blog post.',
      category: ['general']
    },
    'learn-nextjs': {
      title: 'Learning Next.js',
      content: 'Next.js is great for building server-side rendered applications.',
      category: ['react', 'nextjs']
    },
    'deploying-nextjs': {
      title: 'Deploying Next.js Applications',
      content: 'You can deploy Next.js apps using Vercel and other platforms.',
      category: ['development']
    },
    'react-hooks-intro': {
      title: 'Introduction to React Hooks',
      content: 'Hooks allow you to use state and other React features in functional components.',
      category: ['react']
    },
    'redux-with-react': {
      title: 'Using Redux with React',
      content: 'Redux is a predictable state container for JavaScript apps.',
      category: ['react']
    },
    'using-nextjs-with-react': {
      title: 'Combining Next.js with React',
      content: 'Next.js works seamlessly with React and allows server-side rendering.',
      category: ['react', 'nextjs']
    },
    'generic-post': {
      title: 'Generic Post Title',
      content: 'Here is a generic blog post for the `other` category.',
      category: ['other']
    }
  };

  return postsWithCategories[slug];
}

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';

// pages/blog/index.js
export default function BlogIndex() {
  const router = useRouter();
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const fetchedCategories = [
        { path: '/blog/category/react', name: 'React' },
        { path: '/blog/category/react/nextjs', name: 'React > Next.js' },
        { path: '/blog/category/general', name: 'General' },
        { path: '/blog/category/development', name: 'Development' },
        { path: '/blog/category/other', name: 'Other' }
      ];

      setCategories(fetchedCategories);
      setLoading(false);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        <li>
          <Link href="/blog/first-post">First Post</Link>
        </li>
        <li>
          <Link href="/blog/learn-nextjs">Learn Next.js</Link>
        </li>
        <li>
          <Link href="/blog/deploying-nextjs">Deploying Next.js</Link>
        </li>
        <li>
          <Link href="/blog/react-hooks-intro">React Hooks Intro</Link>
        </li>
        <li>
          <Link href="/blog/redux-with-react">Redux with React</Link>
        </li>
        <li>
          <Link href="/blog/using-nextjs-with-react">Using Next.js with React</Link>
        </li>
        <li>
          <Link href="/blog/generic-post">Generic Post</Link>
        </li>
      </ul>

      {!loading && (
        <div>
          <h2>Categories</h2>
          <ul>
            {categories.map((cat) => (
              <li key={cat.path}>
                <Link href={cat.path}>{cat.name}</Link>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

Testing Optional Catch-All Routes

Run your development server:

npm run dev

Navigate to:

• /blog/category/react
• /blog/category/react/nextjs
• /blog/category/other

These URLs will display dynamic blog posts based on category. You can experiment by creating URLs that don't exist, like /blog/category/nonexistent, and observe how the application falls back to the Default Category.

Final Thoughts and Conclusion

• Nested Routes: Use these to organize your application into logical sections with parent-child relationships. They help manage the URL structure effectively.
• Optional Catch-All Routes: Enable you to build flexible applications that can dynamically handle varying URL patterns. They provide a good way to handle complex navigation needs where certain segments of the URL are optional.

Remember, while this example uses static paths for simplicity, in real-world applications, you'd typically fetch these paths directly from your database or CMS.