In our previous blog post, we successfully loaded review data from separate Markdown files and displayed it on a dedicated page. However, we have multiple reviews to showcase, and creating a separate component for each review would be inefficient and redundant. This is where dynamic routes come to the rescue!
Introduction to Dynamic Routes
Dynamic routes allow you to use the same component for multiple paths, making your codebase cleaner and more maintainable. With dynamic routes, you can create a single template that dynamically loads data based on the URL, avoiding duplication and streamlining the development process.
Step-by-Step Guide to Implementing Dynamic Routes
Step 1: Create a Markdown File for Another Review
First, let's create a new Markdown file for another game review. We'll duplicate the existing stardew-valley.md file and modify its contents.
Duplicate the File: Copy stardew-valley.md and rename it to hollow-knight.md.
Modify the Content: Update the title, date, image path, and body content to reflect the new game review.
---
title: "Hollow Knight"
date: "2023-05-05"
image: "/images/hollow-knight.jpg"
---
__Hollow Knight__ is a 2017 Metroidvania video game developed and published by independent developer Team Cherry. In the game, the player controls the Knight, a nameless insectoid warrior, who explores Hallownest, a fallen kingdom plagued by a supernatural disease, known as the infection.
The game is set in diverse subterranean locations, featuring friendly and hostile insectoid characters and numerous bosses. Players have the opportunity to unlock new abilities as they explore each location, along with pieces of lore and flavour text that are spread throughout the kingdom.Step 2: Create a Dynamic Route
Instead of creating a separate component for each review, we will use a dynamic route. Next.js allows us to create dynamic routes using square brackets in the folder name.
Rename the Folder: Change the folder name from stardew-valley to [slug].
Rename the Component: Update the component name from StardewValleyPage to ReviewPage.
Step 3: Update the Component to Use Dynamic Routing
Modify the component to dynamically load the appropriate review based on the URL parameter. The parameter will be accessible via the props object.
import Heading from '@/components/Heading';
import { getReview } from '@/lib/reviews';
export default async function ReviewPage({ params: { slug } }) {
const review = await getReview(slug);
return (
<>
<Heading>{review.title}</Heading>
<p className="italic pb-2">{review.date}</p>
<img src={review.image} alt={review.title} width="640" height="360" className="mb-2 rounded" />
<article dangerouslySetInnerHTML={{ __html: review.body }} className="prose prose-slate max-w-screen-sm" />
</>
);
}Step 4: Test the Dynamic Route
Now, when you navigate to /reviews/hollow-knight, the ReviewPage component will load the hollow-knight.md file. Similarly, navigating to /reviews/stardew-valley will load the stardew-valley.md file.
Step 5: Clean Up
Remove the old component and route for hollow-knight as they are no longer needed.
- import Heading from '@/components/Heading';
- import { getReview } from '@/lib/reviews';
-
- export default async function StardewValleyPage() {
- const review = await getReview('stardew-valley');Conclusion
By using dynamic routes in Next.js, we simplified our codebase and made it more maintainable. We no longer need separate components for each review; instead, we use a single dynamic component that loads different content based on the URL. This approach not only reduces redundancy but also makes it easier to add new reviews in the future.
Dynamic routes are a powerful feature in Next.js that can significantly streamline the development of multi-page applications. By leveraging this feature, you can create more flexible, scalable, and maintainable web applications.
Happy coding!
Comments