All-encompassing NextJS App router with a focus on Internationalization

Question

All-encompassing NextJS App router with a focus on Internationalization

I am currently working with a folder structure that includes an optional catch-all feature. The issue I am facing is that the page does not change when the URL is altered to include ""/"" or ""/about-us"". It consistently remains on the home page. While the localization aspect functions correctly, it always defaults to the home page.

While I understand why this is happening, I would like the locale portion of the URL to be optional. For example, I would like it to accept URLs in the format of /en/page or simply /page. My default locale logic is operational and functioning properly.

typescript next.js next.js13

Answer 1

Answer №1

To convert the route to a parameter-based route, extract the parameter from the page's props since it's automatically passed in. This will work like a catch-all route as long as you anticipate one of those parameters. If you're setting the route dynamically based on cookies or a user agent, simply add another page at the root and redirect to the appropriate translated page using this structure:

app/
    myPage/
           [lang]/
                  page.tsx // Page 1
           page.tsx // Page 2

const PageOne = (props: {params: {lang: string}}) => {
...
}

import { redirect } from "next/navigation" // Verify if this is the correct import location.
const PageTwo = async () => {
   const lang = await getLanguageFromCookiesOrUserAgentOrWhatnot()
   return redirect(`/myPage/${lang}`)
}

Answer 2

To convert the route to a parameter-based route, extract the parameter from the page's props since it's automatically passed in. This will work like a catch-all route as long as you anticipate one of those parameters. If you're setting the route dynamically based on cookies or a user agent, simply add another page at the root and redirect to the appropriate translated page using this structure:

app/
    myPage/
           [lang]/
                  page.tsx // Page 1
           page.tsx // Page 2

const PageOne = (props: {params: {lang: string}}) => {
...
}

import { redirect } from "next/navigation" // Verify if this is the correct import location.
const PageTwo = async () => {
   const lang = await getLanguageFromCookiesOrUserAgentOrWhatnot()
   return redirect(`/myPage/${lang}`)
}

All-encompassing NextJS App router with a focus on Internationalization

Answer №1

Similar questions

Essential parameters needed in a Typescript function signature

Steps for creating a dynamic validation using a new form control

Is there any distinction between using glob wildcards in the tsconfig.json file when specifying "include" as "src" versus "include" as "src/**/*"?

Avoid pressing on y mat-button-toogle

Ways to incorporate JavaScript code within Reactjs

Encountering a Typescript error when trying to pass a function as a prop that returns SX style

What could be causing TypeScript to raise an issue when a /// reference comes after the 'use strict' statement?

Encountering an error while attempting to read the 'displayName' property in a Cypress component test due to its undefined nature

Exploring the Differences Between API Routes and getStaticProps

Ways to retrieve data from an Observable and save it in an Array categorized by a specific identifier

Removing a key from an index signature in Typescript - a step-by-step guide

How to Unsubscribe from an Angular 2 Subscription Automatically After a Timeout

Top method in Angular 6 for verifying if a scrollable section has been scrolled to the very bottom

The issue of images not appearing when using the next Image component in Strapi

Separate an array in TypeScript based on the sign of each number, and then replace the empty spaces with null objects

Experience the power of Next.js with a unique twist: Streaming SSR and PPR for SWR-like behavior

What is the best way to address an eslint warning that says "'component' is declared but its value is never read," even though I am actively utilizing the component in my code?

Display various elements depending on the size of the screen within Next.js

Using TypeScript arrow functions to define parameters

Containerizing Next.js with TypeScript