How To Guides

Creating Optional Dynamic Routes in Next.js 14 with Metadata

by

Navigating the intricacies of Next.js can be challenging, but understanding how to set up optional dynamic routes with metadata can significantly enhance your web application’s SEO and usability. In this blog post, I’ll guide you through creating a Next.js 14 app with optional dynamic routes and setting up canonical URLs using metadata. By the end, you’ll have a better grasp of handling these aspects in your projects.

Thank me by sharing on Twitter 🙏

Introduction

Optional dynamic routes are crucial for applications requiring flexible URL structures. In my recent project, I needed a route like /company/{id}/{name-slug}, where the name slug was optional. I also wanted to ensure that the canonical URLs were correctly set for SEO purposes. Here’s how I achieved this in Next.js 14 using TypeScript.

Setting Up the File Structure

First, let’s structure our Next.js 14 app to handle optional dynamic routes. For this example, the file structure under the /app directory should look like this:

Plaintext
/app/company/[id]/[...name]/page.tsx

This structure indicates that the [id] segment is required, while the [...name] segment is optional.

Creating the Page Component

Next, we’ll create our page.tsx file. This component will render the company information based on the id and name parameters from the URL. Here’s how to set it up:

The World of Minecraft
4.7 out of 5 stars(46)
$24.97 (as of December 21, 2024 19:39 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
iPhone Charger 3 Pack 10 ft Apple MFi Certified Lightning Nylon Braided Cable Fast Charging Cord Compatible with iPhone 13 12 11 Pro Max XR XS X 8 7 6 Plus SE iPad and More
4.4 out of 5 stars(16045)
$9.99 (as of December 21, 2024 08:38 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Unaffiliated Healer: A Fantasy LitRPG Isekai Adventure (Earthen Contenders Book 4)
4.5 out of 5 stars(1324)
$4.99 (as of December 21, 2024 19:39 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

TypeScript
import { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const { id, name } = params;
  const nameSlug = name ? (Array.isArray(name) ? name.join('/') : name) : '';

  const canonicalUrl = `https://yourwebsite.com/company/${id}${nameSlug ? `/${nameSlug}` : ''}`;

  return {
    title: 'Company Page',
    alternates: {
      canonical: canonicalUrl,
    },
  };
}

const CompanyPage = ({ params }) => {
  const { id, name } = params;
  const nameSlug = name ? (Array.isArray(name) ? name.join('/') : name) : '';

  return (
    <div>
      <h1>Company Page</h1>
      <p>Company ID: {id}</p>
      {nameSlug && <p>Company Name Slug: {nameSlug}</p>}
    </div>
  );
};

export default CompanyPage;

In this component, we use the params object to extract the id and name from the URL. The nameSlug is constructed to handle both cases where name could be an array or a single string. This flexibility is essential for optional segments.

Generating Metadata with Canonical URLs

Setting the canonical URL is crucial for SEO to avoid duplicate content issues. In Next.js 14, we use the generateMetadata function to dynamically generate metadata for our pages. Here’s how it’s done:

  1. Define the generateMetadata Function:
TypeScript
export async function generateMetadata({ params }): Promise<Metadata> {
     const { id, name } = params;
     const nameSlug = name ? (Array.isArray(name) ? name.join('/') : name) : '';

     const canonicalUrl = `https://yourwebsite.com/company/${id}${nameSlug ? `/${nameSlug}` : ''}`;

     return {
       title: 'Company Page',
       alternates: {
         canonical: canonicalUrl,
       },
     };
   }

In this function, we construct the canonical URL based on the presence of the name parameter. The alternates property in the returned metadata object includes the canonical URL, ensuring that search engines index the correct URL.

Handling URL Parameters

The CompanyPage component needs to correctly handle the URL parameters. Here’s the code snippet that does this:

TypeScript
const CompanyPage = ({ params }) => {
  const { id, name } = params;
  const nameSlug = name ? (Array.isArray(name) ? name.join('/') : name) : '';

  return (
    <div>
      <h1>Company Page</h1>
      <p>Company ID: {id}</p>
      {nameSlug && <p>Company Name Slug: {nameSlug}</p>}
    </div>
  );
};

In this component:

  • We destructure the params object to get the id and name parameters.
  • We handle the name parameter to create a nameSlug, which can be an array or a single string.
  • We render the company information, displaying the nameSlug only if it exists.

Conclusion

Creating optional dynamic routes in Next.js 14 and setting up canonical URLs with metadata can significantly enhance your application’s SEO and user experience. By structuring your project correctly, handling URL parameters efficiently, and generating metadata dynamically, you ensure that your web pages are both user-friendly and search engine optimized.

Implementing these features in your Next.js 14 application will make your routes more flexible and improve your SEO efforts. I hope this guide has provided a clear and practical approach to achieving this.

Share this:

Related Posts:

Nextjs

Leave a Reply