Next js 14 App Router - Different pathname to render one component

Question

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

Devon Ray · Accepted Answer · 2024-05-22 20:04:50Z

1

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.

  ];
}

edited May 22, 2024 at 20:04

answered May 22, 2024 at 19:55

Devon Ray

8758 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SpicyyRiice Over a year ago

Can you elaborate more with a code?

SpicyyRiice · Accepted Answer · 2024-05-28 17:42:12Z

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();
  }
}

Collectives™ on Stack Overflow

Next js 14 App Router - Different pathname to render one component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related