i18n Problems
Unanswered
Tonkinese posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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?
117 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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);
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1150204240195751986/image.png)
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
@Tonkinese what problem are you facing? are there any errors
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
404
And sometimes when i changed it, not the translation got shown
for example the key got shown
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
show me the error
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
It is just the basic not found error
And this is getting logged
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1150207316168290344/image.png)
idk
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
what is not found
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
the page?
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
what does the error point to
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1150207472074772540/image.png)
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
that's on the main page?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1150207718586589196/image.png)
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
so the only problem now is, that sub pages like /de /en doesnt work
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Bump
So my Translations are now getting loaded
Means on / i get the Default English Language
How would i access German?
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
@Tonkinese are you using pages router?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
I use the App Router
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Some other person absolutly recommended me next-translate
I guess its not a Next-Translate problem
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
I can see why, it's more readable than what I'm using tbf
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Just add it to your project and tell me what i have to change and did wrong ![:LULE:](https://cdn.discordapp.com/emojis/1073746201268203600.png)
![:LULE:](https://cdn.discordapp.com/emojis/1073746201268203600.png)
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
![:honk_thonk:](https://cdn.discordapp.com/emojis/753870955234721821.png)
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
![:5Head:](https://cdn.discordapp.com/emojis/769927811817144371.png)
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1150486376568074400/Screenshot_from_2023-09-10_20-41-59.png)
mine looks smth like that
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
![:Sparkle:](https://cdn.discordapp.com/emojis/1129760999164100670.png)
![:angryD:](https://cdn.discordapp.com/emojis/1109417406444617739.gif)
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
maybe you should ask the person who recommended it for help?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
He is busy ![:sadge:](https://cdn.discordapp.com/emojis/821221132958171167.png)
![:sadge:](https://cdn.discordapp.com/emojis/821221132958171167.png)
Thats basically why i am here
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
that sucks
you might be able to get some help in Reactiflux server
maybe someone knows how next-translate works there
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
How can i get there
Can you send link for me
![Avatar](https://cdn.discordapp.com/avatars/630074438427213851/ec7c1d01c4750775a911d4e52198c98f.webp?size=256)
dank()
okay check your dm
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
I don't know who recommended it to you, but that's not a really good recommendation imo... ![:mild_panic:](https://cdn.discordapp.com/emojis/770004383886737418.png)
The project hasn't seen much activity in the past few months and they have about 100 unresolved issues on GitHub.
![:mild_panic:](https://cdn.discordapp.com/emojis/770004383886737418.png)
The project hasn't seen much activity in the past few months and they have about 100 unresolved issues on GitHub.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
What would you recommend instead
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
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 ✌ï¸
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
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)
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Yeah i am Friday back at Home
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
@not-milo.tsx How can i make a Language Selector with next-intl
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
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...
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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?`![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152960739926098002/image.png)
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
what do you mean? could you be more specific?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
I want to make my Authentication, but the Authentication doesnt work
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152960878237462538/image.png)
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152960911829635172/image.png)
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152961573950857256/image.png)
Is the API Folder outside of [locale] or inside it
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
What should i do now
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152962046682480660/image.png)
Because i have this
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
try following the example I linked you, and if you get any errors you can't resolve let me know
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Doesnt work, getting the same error
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
have you actually tried it tho? it's been two minutes ![:thinq:](https://cdn.discordapp.com/emojis/1150495833716969623.png)
![:thinq:](https://cdn.discordapp.com/emojis/1150495833716969623.png)
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Yes added the middleware
API inside the Locale or outside the folder?
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
I pasted the Middleware from there
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
you can't just copy-paste stuff, you need to adapt it to your own code ![:derp:](https://cdn.discordapp.com/emojis/1133125169561473104.png)
![:derp:](https://cdn.discordapp.com/emojis/1133125169561473104.png)
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
wtf should i adjust
if i do everything same as them, it doesnt make sense to adjust something
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
and you're still getting that error?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
yes
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152965361872949278/image.png)
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152965389312065627/image.png)
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152965405518860310/image.png)
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
can you show me what's inside
/[locale]/page.tsx
?![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
There is my Index File
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152968094944333884/image.png)
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152968094667505674/image.png)
That is the current problem
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1152976067317989486/image.png)
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
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.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
Well there's nothing wrong in this file and the error doesn't seem to be related to next-intl and your i18n attempts
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Yeah now it is this file
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Okay
Thanks for the help with i18n
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
you're welcome ✌ðŸ»
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1156302990320353383/image.png?ex=65147a93&is=65132913&hm=e89b02770cba3fb8129ed7bfb0dc99c7d46f7b08e9ec9d8b9c0d194be337f3f5&)
Nothing works
So means current Problems: Files arent found, Module isnt working right, Error Message provided above
I guess my
![Image](https://cdn.discordapp.com/attachments/1150203029895786526/1156304424118009896/image.png?ex=65147be9&is=65132a69&hm=49e22644911661e2889bb17ee8c7f28c129302f4f8497aa23f6d3d812f80f7d1&)
I guess it works now ![:Donki:](https://cdn.discordapp.com/emojis/935942842747080774.png)
![:Donki:](https://cdn.discordapp.com/emojis/935942842747080774.png)
- 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
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
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![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Do you know how i can translate the Metadata?
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
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.![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
TonkineseOP
Do you know, how i can use it in async functions?
![Avatar](https://cdn.discordapp.com/avatars/548149742207631360/2b1e750ac12613e7f54964225371f39b.webp?size=256)
not-milo.tsx
What exactly?
generateMetadata
is already an asynchronous function.![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
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