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?

120 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
@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
show me the error
Avatar
TonkineseOP
It is just the basic not found error
And this is getting logged
Image
idk
Avatar
what is not found
Avatar
TonkineseOP
the page?
Avatar
what does the error point to
Avatar
TonkineseOP
Image
Avatar
that's on the main page?
Avatar
TonkineseOP
Image
Avatar
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
@Tonkinese are you using pages router?
Avatar
TonkineseOP
I use the App Router
Avatar
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
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
:honk_thonk:
Avatar
TonkineseOP
:5Head:
Avatar
Image
mine looks smth like that
Avatar
TonkineseOP
:Sparkle: Use Next-Translate and HELP ME :angryD:
Avatar
maybe you should ask the person who recommended it for help?
Avatar
TonkineseOP
He is busy :sadge:
Thats basically why i am here
Avatar
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
okay check your dm
Avatar
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
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
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
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
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
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
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
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
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
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
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
and you're still getting that error?
Avatar
TonkineseOP
yes
Image
Image
Image
Avatar
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
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
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
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
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
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
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
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
Avatar
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?
Avatar
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.
Avatar
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.