Upcoming: NextJS version 10 introduces enhanced i18n capabilities with the ability to customize folder names in

I am trying to create a multi-language website where I need to translate a specific folder differently for each language. The folder structure in question is as follows:

pages/kennis/index.tsx

I am having trouble figuring out how to translate the "kennis" folder to have different names based on the language. I checked the documentation of NextJS (https://nextjs.org/docs/advanced-features/i18n-routing#domain-routing), but it doesn't provide any information on this matter.

For example, I want the folder to be "/kennis" for NL and "/en/knowledge" for EN.

If anyone has a solution to this issue, please let me know!

internationalizationnext.js

Answer №1

If you are looking for a convenient package, consider checking out: https://www.npmjs.com/package/next-translate-routes

To use this package, simply create a file named _routes.json and include the following example:

// `/pages/_routes.json`
{
  "knowledge": {
    "es": "mas",
    "pt": "mais"
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The page loads successfully at first, but upon refreshing, a 404 error occurs when using Zeit, Nextjs, and now

After recently updating from now v1 to v2, I encountered an issue where my pages would return a 404 error when reloading after pushing to production using now --prod. While everything worked fine locally with now dev, the routing seemed to be causing confu ...

javascriptreactjsnext.jsserverless-frameworkvercel

The size of Next.js builds is steadily increasing

After creating a new nextjs project using app routes, I noticed that when I run npm run build, the .next folder ends up being approximately 32mb in size. I'm curious to know if this is a typical size for a nextjs project. During development, I watche ...

next.js

Difficulty in submitting the information on the form

I recently had a question similar to this one, but unfortunately it was closed due to the length of the code. I'll try to keep this brief. My partner and I created a form, however, all the <Select> inputs are being sent as "undefined" in the HT ...

next.jsmaterial-ui

Best practices for managing backend errors with Next.js 14

Currently, I am developing a project in Next.js 14 and I have set up my API requests using fetch within a handler.tsx file as shown below: async function getPositions() { const response = await fetch( process.env.BASE_API_URL + "/positions?enabl ...

reactjstypescriptnext.jsnext.js13server-action

Why does the API in Next Js get triggered multiple times instead of just once, even when the strict mode is set to false?

React Query Issue I am currently facing an issue with React Query where the API is being triggered multiple times instead of just once when the selectedAmc value changes. I have tried setting strict mode to false in next.config.js, but that didn't so ...

javascriptreactjsnext.jsreact-query

Instructions for utilizing ObjectId with a string _id on the client side

Is there a way to retrieve a document using the _id in string format? Here is an example of the code on the client side: 'use client' ... const Page(){ ... fetch("api/get_data", { method: 'POST', ...

typescriptmongodbnext.jsnext.js13

What is the best way to implement react-password-checklist with zod?

I've been trying to utilize the react-password-checklist library to inform users if their password complies with the rules set in zod's schemaUser. However, I'm facing challenges in implementing this feature successfully. Note: I am using zo ...

typescriptnext.jsreact-hook-formzod

Encountering a "No session persistence storage option available" error while working on a Next.js 12 + Supabase project

I'm currently working on a project that involves Supabase and Next.js version 12.3.4. I managed to set up Google sign-in following the steps outlined in this helpful tutorial: Supabase Login with Google. However, every time I run the project, Terminal ...

next.jssupabase-js

Ways to conditionally display a component in Next.js without the issue of caching CSS styles

I'm a newcomer to Next.js and I'm still trying to wrap my head around how the caching works. Let's take a look at this simplified example: An index page that displays either Test1 or Test2 components, based on whether the current minute is ...

csstypescriptcachingnext.js

Error message encountered in VercelCLI during the deployment of a Nextjs project: "Connection

I've encountered an issue while attempting to deploy my next.js frontend using Vercel CLI, and I keep getting an error. Here is a screenshot of the error: enter image description here Any suggestions on how to resolve this? My current version of Ver ...

next.jsvercel

Next.js experiencing issues with applying styles from .modules.scss files

Recently, I initiated a new Next.js 13 application, Within this project, there exists a file named main.modules.scss .heading { font-size: 4rem; color: #000; } .dark .heading { color: #fff; } My intention is to utilize this file for styling ...

cssreactjsnext.jssassnext.js13

Mastering the utilization of API routes within the Next JS 13 App Router framework

As a newcomer to React JS and Next.js, I recently made the switch from using the Page Router API in Next.js to utilizing the new App Router introduced in Next.js 13. Previously, with the Page Router, creating a single GET request involved nesting your "JS ...

javascripttypescriptnext.jsapp-router

System reboots upon socket message reception

I am currently working on developing a chat application using Next, Express, and Socket.io. I have encountered an issue where the state managing the messages in the chat resets every time a new message is sent from one browser to another. You can see an ex ...

reactjsexpresswebsocketsocket.ionext.js

Securing Next.js with JWT authentication

Presently, my backend provides me with an access and refresh token for user authorization. In a past project, I stored tokens in local storage for client-side user authentication. As my current project is restricted to registered users only, I have implem ...

authenticationnext.jsserver-side

The identical page content is displayed on each and every URL

Implementing a multi-step form in Next JS involves adding specific code within the app.js file. Here is an example of how it can be done: import React from "react"; import ReactDOM from "react-dom"; // Other necessary imports... // Add ...

javascriptreactjsnext.jsserver-side-rendering

Unable to show information in Next.js Strapi integration

I have set out to create a basic task management website as a way to delve into the world of full stack development. My tech stack includes Next.js and Strapi, but I've hit a roadblock. Despite my best efforts, I can't seem to get the server data ...

axiosnext.jsstrapi

When attempting to launch the Next.js DEV server using a specific IP address and port, an error message of "get

Running a development server on my local area network (LAN) has always worked fine for me in the past, but recently I've been encountering an error when trying to run servers like Vite or NextJS on 192.168.1.7:3000. Here is a screenshot of the error ...

windowsnext.jsbrowsermicrosoft-edgelan

When the application is converted into static files, the dynamic routes fail to function properly

I have a website that is statically exported but has dynamic routes. During development, the site works fine. However, when I build and export it, then serve the static files using serve, an issue arises. If you go to the site root and click on a link th ...

javascriptreactjsnext.js

Next.js does not recognize the term 'localstorage'

I am currently in the process of transitioning an application from React to Next Interestingly, in React, I encounter no errors with this particular code snippet: let [authTokens, setAuthTokens] = useState(() => localStorage.getItem('authTokens&ap ...

reactjsnext.jslocal-storage

Having trouble setting up next-themes on my device

I have been attempting to incorporate the shadcn dark mode ui, but unfortunately, I am facing difficulties in downloading the package. Upon running npm i next-themes in the terminal, this is the output that I receive: $ npm i next-themes up to date, aud ...

npmnext.jsshadcnui