Next.js Discord

Discord Forum

i18n Problems

Unanswered
Tonkinese posted this in #help-forum
Open in Discord
Avatar
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?

117 Replies

Avatar
TonkineseOP
I created a folder Structure

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
Avatar
dank()
@Tonkinese what problem are you facing? are there any errors
Avatar
TonkineseOP
404
And sometimes when i changed it, not the translation got shown
for example the key got shown
Avatar
dank()
show me the error
Avatar
TonkineseOP
It is just the basic not found error
And this is getting logged
Image
idk
Avatar
dank()
what is not found
Avatar
TonkineseOP
the page?
Avatar
dank()
what does the error point to
Avatar
TonkineseOP
Image
Avatar
dank()
that's on the main page?
Avatar
TonkineseOP
Image
Avatar
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
TonkineseOP
so the only problem now is, that sub pages like /de /en doesnt work
Avatar
TonkineseOP
Bump
So my Translations are now getting loaded
Means on / i get the Default English Language
How would i access German?
Avatar
dank()
@Tonkinese are you using pages router?
Avatar
TonkineseOP
I use the App Router
Avatar
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
TonkineseOP
Some other person absolutly recommended me next-translate
I guess its not a Next-Translate problem
Avatar
dank()
I can see why, it's more readable than what I'm using tbf
Avatar
TonkineseOP
Just add it to your project and tell me what i have to change and did wrong :LULE:
Avatar
dank()
:honk_thonk:
Avatar
TonkineseOP
:5Head:
Avatar
dank()
Image
mine looks smth like that
Avatar
TonkineseOP
:Sparkle: Use Next-Translate and HELP ME :angryD:
Avatar
dank()
maybe you should ask the person who recommended it for help?
Avatar
TonkineseOP
He is busy :sadge:
Thats basically why i am here
Avatar
dank()
that sucks
you might be able to get some help in Reactiflux server
maybe someone knows how next-translate works there
Avatar
TonkineseOP
How can i get there
Can you send link for me
Avatar
dank()
okay check your dm
Avatar
not-milo.tsx
I don't know who recommended it to you, but that's not a really good recommendation imo... :mild_panic:
The project hasn't seen much activity in the past few months and they have about 100 unresolved issues on GitHub.
Avatar
TonkineseOP
What would you recommend instead
Avatar
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
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
TonkineseOP
Yeah i am Friday back at Home
Avatar
TonkineseOP
@not-milo.tsx How can i make a Language Selector with next-intl
Avatar
not-milo.tsx
you can create a component with two Links 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 locale
this would be the most basic version of a switch, but you can also use dropdowns, switches and co...
Avatar
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
Avatar
not-milo.tsx
what do you mean? could you be more specific?
Avatar
TonkineseOP
I want to make my Authentication, but the Authentication doesnt work
Image
Image
Avatar
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
TonkineseOP
Image
Is the API Folder outside of [locale] or inside it
Avatar
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
TonkineseOP
What should i do now
Image
Because i have this
Avatar
not-milo.tsx
try following the example I linked you, and if you get any errors you can't resolve let me know
Avatar
TonkineseOP
Doesnt work, getting the same error
Avatar
not-milo.tsx
have you actually tried it tho? it's been two minutes :thinq:
Avatar
TonkineseOP
Yes added the middleware
API inside the Locale or outside the folder?
Avatar
not-milo.tsx
you need to integrate next-intl's middleware with next-auth's middleware
otherwise you're going to have issues
Avatar
TonkineseOP
I pasted the Middleware from there
Avatar
not-milo.tsx
you can't just copy-paste stuff, you need to adapt it to your own code :derp:
Avatar
TonkineseOP
wtf should i adjust
if i do everything same as them, it doesnt make sense to adjust something
Avatar
not-milo.tsx
and you're still getting that error?
Avatar
TonkineseOP
yes
Image
Image
Image
Avatar
not-milo.tsx
can you show me what's inside /[locale]/page.tsx?
Avatar
TonkineseOP
There is my Index File
Image
Image
That is the current problem
Avatar
TonkineseOP
Image
Avatar
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
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)
that is the current problem
Avatar
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
TonkineseOP
Yeah now it is this file
Avatar
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
TonkineseOP
Okay
Thanks for the help with i18n
Avatar
not-milo.tsx
you're welcome ✌🏻
Avatar
TonkineseOP
⨯ node_modules\next-intl\dist\esm\server\getLocaleFromHeader.js (1:578) @ eval
⨯ 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
TonkineseOP
Image
Nothing works
So means current Problems: Files arent found, Module isnt working right, Error Message provided above
I guess my
Image
I guess it works now :Donki:
- error Error: Unable to find 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
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
TonkineseOP
Do you know how i can translate the Metadata?
Avatar
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
TonkineseOP
Do you know, how i can use it in async functions?
Avatar
not-milo.tsx
What exactly? generateMetadata is already an asynchronous function.
Avatar
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