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
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
Use Next-Translate and HELP ME
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
Can you send link for me
okay check your dm
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.
TonkineseOP
What would you recommend instead
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)
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
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
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
Well there's nothing wrong in this file and the error doesn't seem to be related to next-intl and your i18n attempts
TonkineseOP
Yeah now it is this file
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 ✌ðŸ»
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-componentsTonkineseOP
Do you know how i can translate the Metadata?
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.
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.