Do You Even Dynamic Link Bro?

I was working on a few projects where I wanted to have content render to a page using query stringing. Query strings are a straightforward way to pass parameters in URLs. They are appended to the URL after a question mark (?), with key-value pairs separated by an ampersand (&). For example: https://latestartdev.com/page?param1=value1&param2=value2

For my personal projects, I was using c-panel and hosting through Hostgator. For work, our web server is built with Apache. I would build the application locally, and everything would work the way I'd expect it to work with info rendering nicely using query stringing. And then, when I'd serve it up through one of the aforementioned servers, any time I'd refresh the page populated from the query string, the page would just break. So frustrating! I have zero experience with setting up either server, so I didn't really know what to do.

I decided to pivot and loaded one of my projects to Vercel. And it just worked! Not only that, but I didn't have to have my app go through a static build and upload a folder with random files to a server. Instead, I just needed to create a repository in GitHub for my project, connect it to Vercel, and every time I saved my project on VS Code, all the updates would go live directly to my website! I still love how easy that process is.

While I got a project up and running hosting through Vercel, I was learning a lot about Next.js. It's how I heard about Vercel in the first place as they are the company that created Next.js. As I'm learning about things, I came across Dynamic linking. Whaaa?… It's query stringing without stringing anything to the URL… looks so clean! In fact it is what I'm using for the page you are currently reading!

Let’s Talk About Dynamic Routes in Next.js

When building web applications, dynamically rendering pages based on URL parameters is a common requirement. Next.js simplifies this process with dynamic routes. Here's how you can effectively create and use dynamic routes by creating a simple list using map, and making those list item link to pages using dynamic linking:

1. Create a New Next.js Project

Start by setting up a new Next.js project. Be sure to set up your app with App Router.

2.Set Up Folder and Dynamic Routing

In your Next.js project, create a folder structure and utilize dynamic routing. For example:

app
|__page.jsx
|__posts.json
|__[postSlug]
     |__ page.jsx

Take note of the folder named [postSlug]. To make the URL dynamic, it's essential to have the folder name surrounded by brackets like above.

3. Create a JSON File for Data

Begin with a JSON file (posts.json) containing objects with titles and corresponding query parameters:

posts.json -

'posts': [ {
title:'My First Post',
query:'first-post'
},
{
title:'My Second Post',
query:'second-post'
}

4.Implement Dynamic Linking

In your app/page.jsx file, map through the objects in posts.json and use Next.js <Link> component to dynamically link to each post:

import Posts from './posts.json';

Posts.posts.map( item => {
return ( <div key={item.id}> <Link href={`demo/${item.query}`}>{item.title}</Link> </div> );
})]

5. Implement Dynamic Linking

In your [query]/page.jsx file, retrieve the query parameter from the URL:

import Posts from "../posts.json";

const page = ({params}) => {
  const queryString = params.render;
  console.log(queryString);
  const foundPost = Posts.posts.find((item) => item.query === queryString);
  return (
    <>
      <h1>{foundPost.title}</h1>
    </>
  );
};

Following the above we are rendering out the 'title' key value pair that is connected to the 'query' field on our JSON file using the file method.

I found this video that I thought was very helpful: YOUTUBE VIDEO . Check it out if you are looking for something a little more in-depth.

Dynamic routes in Next.js offer a robust mechanism for creating flexible and SEO-friendly web applications. By leveraging dynamic segments, accessing URL parameters, and seamlessly linking between pages, developers can enhance user experiences and streamline development. Whether you're building a blog, e-commerce site, or any dynamic application, Next.js' dynamic routing capabilities provide powerful solutions to meet your needs. Explore, experiment, and harness the full potential of Next.js for your projects. I hope this guide proves helpful to you!