Creating a dynamic route with a parameter in NextJS that maps to a specific page

Question

Creating a dynamic route with a parameter in NextJS that maps to a specific page

Currently, I'm developing a NextJS application and implementing Static HTML Export to make it a Jamstack app.

I'm facing an issue while setting up dynamic routes that depend on a username parameter included in the route: localhost:3000/:username/posts

For example: localhost:3000/jdoe/posts

This route should display all posts belonging to the user "jdoe."

My goal is to have the /posts page load statically without SSR and then fetch the posts using an API call. However, during build time, NextJS throws a 404 because it doesn't generate pages for specific usernames.

Is there a way to configure NextJS so that all requests to /:username/posts simply map to the posts page? I want to achieve this without SSR and without relying on query strings to specify the username, but rather have it as part of the path. I don't need a separate page generated for each username; all users should access the same page with their username used to load their respective posts.

Here's a glimpse of my directory structure:

directory structure

This method functions properly locally due to the presence of a development server. However, when deploying to my staging environment on Netlify using next export for Static HTML Export, the route breaks and returns a 404 error.

Currently utilizing Next version 10.0.5 and deploying to Netlify.

Thank you in advance!

reactjs next.js netlify jamstack

Answer 1

Answer №1

It may not be feasible to utilize the next export feature for your specific scenario. If you absolutely require exporting it to static html, you might have to resort to using URL parameters. For instance, try something like /posts?username=john.

To retrieve these parameters in your page, you can utilize the useRouter hook. This method is compatible with the next export functionality.

import {useRouter} from 'next/router'

function Posts() {
  const router = useRouter();
  return <h1>{router.query.username}</h1>
}

export default Posts

Answer 2

It may not be feasible to utilize the next export feature for your specific scenario. If you absolutely require exporting it to static html, you might have to resort to using URL parameters. For instance, try something like /posts?username=john.

To retrieve these parameters in your page, you can utilize the useRouter hook. This method is compatible with the next export functionality.

import {useRouter} from 'next/router'

function Posts() {
  const router = useRouter();
  return <h1>{router.query.username}</h1>
}

export default Posts

Creating a dynamic route with a parameter in NextJS that maps to a specific page

Answer №1

Similar questions

Develop an extensive Typescript and React shared library

Error TS2339: Cannot access attribute 'reactive_support' on interface 'LocalizedStringsMethods'

Changing the background color with a switch function in ReactJS

Is there a way to utilize variables in useEffect without including them in the dependency array?

What is the best way to assign a unique ID to every <td> element within a table using React Js?

Missing data list entries for next js server actions

Next.js fails to refresh the content upon initial view

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Utilize MaterialUI's stepper component to jazz up your design with

What is the best way to configure the loading state of my spinner?

Creating a seamless navigation experience using Material UI's react Button and react-router-dom Link

The countdown feature is failing to update despite using the SetInterval function

callback triggering state change

"Encountering a 'react-scripts start' error while setting up on a different device

Transforming the DevExtreme Dialog/Popup component into a MaterialUI equivalent in React using JavaScript

Guide on embedding a form component within an iframe using ReactJS

What are some tips for creating an improved React list container component?

Display a loading splash screen prior to loading Next.js

Styles are absent from the NextJS 13.4 App Router Middleware Page Redirect feature

After fetching, null is returned; however, refreshing the page results in the object being returned. What is the