Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Next js 14 App Router – Different pathname to render one component

I’m working with Next.js 14 and next-intl and trying to set up a routing mechanism where different paths render the same component based on the pathname. My application is multilingual, and each language version has its own URL path but should load the same component. Here are the paths I’m working with:

For the "Hi" component:

  • http://localhost:3000/en/hi
  • http://localhost:3000/fr/allo
  • http://localhost:3000/vn/xin-chao

For the "Bye" component:

  • http://localhost:3000/en/seeya
  • http://localhost:3000/fr/bye
  • http://localhost:3000/vn/tam-biet

For the "About Us" component:

  • http://localhost:3000/en/about-us
  • http://localhost:3000/fr/a-propos-de-nous
  • http://localhost:3000/vn/ve-chung-toi

I’m looking for a way to configure the Next.js router so that these different URLs render the appropriate component without creating a separate page file for each path. Ideally, I’d like to manage this with dynamic routing.

Has anyone implemented something similar or can provide guidance on how to approach this in Next.js? Any help or pointers would be greatly appreciated!

I looked up for async redirects(), but it doesn’t keep the original url…Should I do a catch-all route and do many if else to check the pathname? Which is wierd for me honestly

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally I found my answer which is the following inspired by @Devon Ray's answer

    import { useTranslations } from 'next-intl';
import Hi from '@/components/pages/Hi';
import Bye from '@/components/pages/Bye';
import AboutUs from '@/components/pages/AboutUs';
import { notFound } from 'next/navigation';

export default function Index({ params }) {
  const t = useTranslations('Language');

  const componentMap = {
    'hi': Hi,
    'bye': Bye,
    'about-us': AboutUs,
  };

  const pathDictionary = {
    'hi': ['hi', 'allo', 'xin-chao'],
    'bye': ['seeya', 'bye', 'tam-biet'],
    'about-us': ['about-us', 'a-propos-de-nous', 've-chung-toi'],
  };

  const foundKey = Object.keys(pathDictionary).find(key => pathDictionary[key].includes(params.category));

  if (foundKey) {
    const Component = componentMap[foundKey];
    return <Component />;
  } else {
    return notFound();
  }
}

  2. 0

    If you need it to be dynamic you will need to use dynamic params like this:

    /{lang}/{path}

    You can use static generation to build out the pages from a api.

    You can also use headers to create rewrites from your middleware.

    Edit:
    You can create a file under

    app/[lang]/[path]/page.js

    then in your file you can access the path params like so:

    export default async function Page({ params }) {
  // use params.lang and params.path here.
}

    for the static generation you can also add:

    export async function generateStaticParams() {
  return [
      {
          'lang': 'en',
          'path': 'hi'
      },
      // ... and the rest of your routes.

  ];
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search