i18n Problems
Unanswered
Tonkinese posted this in #help-forum

TonkineseOP
Hey,
I am currently trying to add I18 to my Site.
I am trying since 7,5 Hours with next-translate and it doesnt work.
Can someone help me?
I am currently trying to add I18 to my Site.
I am trying since 7,5 Hours with next-translate and it doesnt work.
Can someone help me?
120 Replies

TonkineseOP
I created a folder Structure
Also i created a file called i18n.js
My next.config.js looks like this:
locales
-> en
--> home.json
-> de
--> home.json
Also i created a file called i18n.js
module.exports = {
locales: ['en', 'de'],
defaultLocale: 'en',
pages: {
'/': ['home'],
},
}
My next.config.js looks like this:
/** @type {import('next').NextConfig} */
const nextConfig = {
i18n: {
locales: ['en', 'de'],
defaultLocale: 'en'
},
experimental: {
serverActions: true,
},
images: {
domains: [
"cdn.discordapp.com",
"cdn.discord.com"
],
},
};
// module.exports = nextConfig;
const nextTranslate = require('next-translate-plugin')
module.exports = nextTranslate(nextConfig);


@Tonkinese what problem are you facing? are there any errors

TonkineseOP
404
And sometimes when i changed it, not the translation got shown
for example the key got shown

show me the error

TonkineseOP
It is just the basic not found error
And this is getting logged

idk

what is not found

TonkineseOP
the page?

what does the error point to

TonkineseOP


that's on the main page?

TonkineseOP


maybe @not-milo.tsx can help you
I'm not using next-translate for i18n, I used next.js i18n, check this video https://www.youtube.com/watch?v=hA0Wp3KQYGU

TonkineseOP
so the only problem now is, that sub pages like /de /en doesnt work

TonkineseOP
Bump
So my Translations are now getting loaded
Means on / i get the Default English Language
How would i access German?

@Tonkinese are you using pages router?

TonkineseOP
I use the App Router

@dank() I'm not using next-translate for i18n, I used next.js i18n, check this video https://www.youtube.com/watch?v=hA0Wp3KQYGU

idk how next-translate works, maybe tmrw milo can help you with that since he's really good with i18n, until then I suggest considering following that tutorial in case you reach a dead end with next-translate

TonkineseOP
Some other person absolutly recommended me next-translate
I guess its not a Next-Translate problem

I can see why, it's more readable than what I'm using tbf

TonkineseOP
Just add it to your project and tell me what i have to change and did wrong 


TonkineseOP

mine looks smth like that

TonkineseOP



maybe you should ask the person who recommended it for help?

TonkineseOP
He is busy 

Thats basically why i am here

that sucks
you might be able to get some help in Reactiflux server
maybe someone knows how next-translate works there

TonkineseOP
How can i get there

@dank() you might be able to get some help in Reactiflux server

TonkineseOP
Can you send link for me

okay check your dm

@Tonkinese Some other person absolutly recommended me next-translate

I don't know who recommended it to you, but that's not a really good recommendation imo... 
The project hasn't seen much activity in the past few months and they have about 100 unresolved issues on GitHub.

The project hasn't seen much activity in the past few months and they have about 100 unresolved issues on GitHub.

If you can I suggest you switch to [
next-intl
](https://github.com/amannn/next-intl)If you need assistance with that let me know ✌ï¸

An even better solution would be to implement internationalisation without the use of a third-party library as shown in the [official Next.js i18n example](https://github.com/vercel/next.js/tree/canary/examples%2Fapp-dir-i18n-routing)

@not-milo.tsx If you need assistance with that let me know ✌ï¸

TonkineseOP
Yeah i am Friday back at Home

TonkineseOP
@not-milo.tsx How can i make a Language Selector with next-intl

you can create a component with two
Link
s inside it. they would both link to the current path but each with a different locale prefix. one for the current locale and one for the other available localethis would be the most basic version of a switch, but you can also use dropdowns, switches and co...

TonkineseOP
@not-milo.tsx So i added next-intl but my API route doesnt work anymore
I want to use NextAuth
- error Error: Unable to find
next-intl
locale, have you configured the middleware?`

what do you mean? could you be more specific?

TonkineseOP
I want to make my Authentication, but the Authentication doesnt work



@Tonkinese - error Error: Unable to find `next-intl` locale, have you configured the middleware?`

Well, have ypu configured your middleware correctly? next-intl has an example on how to integrate next-auth with it inside middleware. you can find it here: https://next-intl-docs.vercel.app/docs/routing/middleware#example-auth-js

TonkineseOP

Is the API Folder outside of [locale] or inside it

right now your i18n logic is being executed on api routes too, so any request made to an endpoint is going to be prefixed and cause problems

TonkineseOP
What should i do now

Because i have this

@Tonkinese What should i do now

try following the example I linked you, and if you get any errors you can't resolve let me know

TonkineseOP
Doesnt work, getting the same error

have you actually tried it tho? it's been two minutes 


TonkineseOP
Yes added the middleware
API inside the Locale or outside the folder?

no, I mean have you tried following this guide? https://next-intl-docs.vercel.app/docs/routing/middleware#example-auth-js
you need to integrate next-intl's middleware with next-auth's middleware
otherwise you're going to have issues

TonkineseOP
I pasted the Middleware from there

you can't just copy-paste stuff, you need to adapt it to your own code 


TonkineseOP
wtf should i adjust
if i do everything same as them, it doesnt make sense to adjust something

and you're still getting that error?

TonkineseOP
yes




can you show me what's inside
/[locale]/page.tsx
?
TonkineseOP
There is my Index File


That is the current problem

TonkineseOP


Can you link me the repo of your code? Looking at unrelated error screenshots doesn't give me a clear overview of what you're doing and what might be wrong.

TonkineseOP
This isnt a public project
/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
export async function GET() {
NextAuth({
providers: [
DiscordProvider({
authorization:
"https://discord.com/api/oauth2/authorize?scope=identify+email+guilds",
clientId: `${process.env.DISCORD_CLIENT_ID}`,
clientSecret: `${process.env.DISCORD_CLIENT_SECRET}`,
}),
],
adapter: PrismaAdapter(prisma),
});
}
export async function POST() {
NextAuth({
providers: [
DiscordProvider({
authorization:
"https://discord.com/api/oauth2/authorize?scope=identify+email+guilds",
clientId: `${process.env.DISCORD_CLIENT_ID}`,
clientSecret: `${process.env.DISCORD_CLIENT_SECRET}`,
}),
],
adapter: PrismaAdapter(prisma),
});
}
- error TypeError: Cannot read properties of undefined (reading 'headers')
at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)
at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)
that is the current problem

@Tonkinese Click to see attachment

Well there's nothing wrong in this file and the error doesn't seem to be related to next-intl and your i18n attempts

can you split this to a different thread or ask in #next-auth ?
I can help you with next-intl and i18n in general, other issues that might pop up deserve their own threads

TonkineseOP
Okay
Thanks for the help with i18n

you're welcome ✌ðŸ»

@not-milo.tsx you're welcome ✌ðŸ»

TonkineseOP
⨯ node_modules\next-intl\dist\esm\server\getLocaleFromHeader.js (1:578) @ eval
⨯ Error: Unable to find
at LocaleLayout (./src/app/[locale]/layout.js:16:73)
at async Promise.all (index 0)
digest: "3776064132"
null
⨯ Error: Unable to find
next-intl
locale, have you configured the middleware?`at LocaleLayout (./src/app/[locale]/layout.js:16:73)
at async Promise.all (index 0)
digest: "3776064132"
null
This is one error annoying me
currently

TonkineseOP

Nothing works
So means current Problems: Files arent found, Module isnt working right, Error Message provided above
I guess my

I guess it works now 

- error Error: Unable to find
at Home (./src/app/[locale]/page.tsx:128:68)
at async Promise.all (index 0)
at async Promise.all (index 0)
digest: "662503447"
null
next-intl
locale, have you configured the middleware?`at Home (./src/app/[locale]/page.tsx:128:68)
at async Promise.all (index 0)
at async Promise.all (index 0)
digest: "662503447"
null
this is still a problem

Recently the owner of
next-intl
explained why this may be happening in [this GitHub comment](https://github.com/amannn/next-intl/issues/526#issuecomment-1733128246). He also added a section about it in the docs at this url: https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale. The docs have also been updated to avoid using useLocale
inside the root layout file so you might need to read it's guide for RSCs again. You can find it here: https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components
You can use the locale provided by next-intl inside the
generateMetadata
function and then use your dictionary to populate the values as you see fit.
@not-milo.tsx You can use the locale provided by next-intl inside the `generateMetadata` function and then use your dictionary to populate the values as you see fit.

TonkineseOP
Do you know, how i can use it in async functions?

What exactly?
generateMetadata
is already an asynchronous function.
Mossyrose gall wasp
i just used this doc for internalization it works very well in my project https://nextjs.org/docs/app/building-your-application/routing/internationalization

Korean bullhead
We have a nextjs 14 (app router) project with mostly client side components. We are currently working on adding localization feature and exploring all the available libraries. So far, next-intl and next-translate seem to be popular considering App router implementation.
Is there any translation extractions tool similar to https://github.com/i18next/i18next-parser that can automate extraction process and works well with next-intl or next-translate?
Is there any translation extractions tool similar to https://github.com/i18next/i18next-parser that can automate extraction process and works well with next-intl or next-translate?

As far as I know, there isn't one for those two libraries but I haven't looked too hard tbh.
I usually just type the shape of my dictionaries and manage them by hand, but I never had to internationalise really large websites.
By the way... You should avoid using an old thread for new and different problems.
I usually just type the shape of my dictionaries and manage them by hand, but I never had to internationalise really large websites.
By the way... You should avoid using an old thread for new and different problems.

@not-milo.tsx As far as I know, there isn't one for those two libraries but I haven't looked too hard tbh.
I usually just type the shape of my dictionaries and manage them by hand, but I never had to internationalise really large websites.
By the way... You should avoid using an old thread for new and different problems.

Korean bullhead
Thanks for your reply, @not-milo.tsx . I unintentionally posted my question in an old thread and only realized my mistake after you pointed it out. I appreciate you letting me know and will initiate a new thread accordingly. Thanks.