Metadata in NextJs Internationalization
Unanswered
LaPerm posted this in #help-forum
LaPermOP
so I set up my app according to nextjs doc Internationalization (i18n) Routing: https://nextjs.org/docs/pages/building-your-application/routing/internationalization
This is my folder structure:
It work completely fine. However it only have the metadata for the route '[lang]' ('https//examples.com/vi') or ('https//examples.com/en') but with the ('https//examples.com/') it doesn't show anything. Even if I make a layout.tsx in the 'app' directly with the metadata in it. Is there anyway to have metadata even in the ('https//examples.com/').
Note: My middleware is redirect the ('https//examples.com/') to an lang route not sure whether it the problem.
Github: https://github.com/Minhnhat0408/Hub-Media , deploy link is also in the github.
This is my folder structure:
It work completely fine. However it only have the metadata for the route '[lang]' ('https//examples.com/vi') or ('https//examples.com/en') but with the ('https//examples.com/') it doesn't show anything. Even if I make a layout.tsx in the 'app' directly with the metadata in it. Is there anyway to have metadata even in the ('https//examples.com/').
Note: My middleware is redirect the ('https//examples.com/') to an lang route not sure whether it the problem.
Github: https://github.com/Minhnhat0408/Hub-Media , deploy link is also in the github.
75 Replies
the metadata is only in the route '[lang]' because metdata is set there (nowhere in root layout)
https://github.com/Minhnhat0408/Hub-Media/blob/main/src/app/%5Blang%5D/layout.tsx#L12-L32
https://github.com/Minhnhat0408/Hub-Media/blob/main/src/app/%5Blang%5D/layout.tsx#L12-L32
wait you don't even have a file for the root layout, are you doing redirecting
if i use discord's embed visuliser, you can see that you get the status code of 500
i think this may because there isn't any headers for it know what to do, and as such crashing
LaPermOP
I know that there is no layout outside. But in the tutorial of the document in nextjs it said that put root layout and page in the [lang] folder and auto redirect to [lang] folder in middleware. I've try to make the build another layout.tsx outside of the [lang] (inside app of course) with metadata export in it but it still not working. Is there any way to do it
@riský wait you don't even have a file for the root layout, are you doing redirecting
LaPermOP
do you have any idea on doing it
yeah i realised that it is redirecting, but for some reason it is crashing
can you check the vercel deployment logs to see what the error was from
LaPermOP
are you trying to clone it and run
no
im just using upir hosted version (on vercel)
and it should show you the error on the dashboard
LaPermOP
this is the latest build log
i meant go to logs section
LaPermOP
it also doesn't regconize the opengraph
thats because it is erroring for crawlers
and i asking for logs section to see the exact reasoning for error
LaPermOP
holy :)) this is the first time I saw it
can you click on one of them, and see the full error
LaPermOP
RangeError: Incorrect locale information provided
at (node_modules/@formatjs/intl-localematcher/lib/abstract/CanonicalizeLocaleList.js:7:16)
at (node_modules/@formatjs/intl-localematcher/lib/index.js:8:34)
at (src/middleware.ts:17:17)
at (src/middleware.ts:30:19)
at (node_modules/next/dist/esm/server/web/adapter.js:167:32)
at (node_modules/@formatjs/intl-localematcher/lib/abstract/CanonicalizeLocaleList.js:7:16)
at (node_modules/@formatjs/intl-localematcher/lib/index.js:8:34)
at (src/middleware.ts:17:17)
at (src/middleware.ts:30:19)
at (node_modules/next/dist/esm/server/web/adapter.js:167:32)
here
the bug from middleware, i only set the middleware for en and vi which is vietnam, I don't know if it related to this
as a sketchy method of fixing (i don't know much about
@formatjs/intl-localematcher) try {
return matchLocale(languages, locales, i18n.defaultLocale)
} catch (error) {
// just logging for the fun of it
console.log(error)
return i18n.defaultLocale
}i think this might fix, it basicly runs the machLocal script, but if that errors, it just does default local
LaPermOP
wait imma try it rn
im sure there is a better way tho
but im asuming it works as expected in browser (like redirecting for correct langs), its just not for metadata?
LaPermOP
yeah but have you try the internationalization one
i haven't used this package before, but the website redirects me to english with no errors, so i asumed it worked
LaPermOP
there are web that be able to do both redirecting to the correct route and still have the metadata in the root url
like this page
let me know how it goes with my sus fix :0
@LaPerm Click to see attachment
also if possible, can you log the 3 variables that go into
matchLocale, and see if they are whats expectedLaPermOP
this is what u mean r
yeah that should work
LaPermOP
I think that the defaullocale in the matchLocale param should as well did this :))
but let me try
thats what i thought, but it for some reason was erroring, so... thats why i was asking for you to log the other 2 vars (to make sure it is correctly passed)
@LaPerm Click to see attachment
so looking more into this error and reading [docs](https://formatjs.io/docs/polyfills/intl-localematcher/), i think the
requestedLocales variable isn't a list of strings... so can you try to make sure they are a list, even if its just the contents of defaultLaPermOP
hmm there is a bug in the first time I start the server but I reload it and it go normal, now I can't see the bug anymore even when I restart server 😢
@riský so looking more into this error and reading [docs](<https://formatjs.io/docs/polyfills/intl-localematcher/>), i think the `requestedLocales` variable isn't a list of strings... so can you try to make sure they are a list, even if its just the contents of default
LaPermOP
I get it, maybe it return 'en' instead of list
but if it a bug then your try catch must solve it
yeah
but i think just log the value to see what we are playing with (so it can be esier to fix)
if it is empty list, just add en to it
if it is undefined, make it a list
LaPermOP
hmm i think sometimes it wrong :))
and now with the metadata website test (because they arn't as nice as broswes for sending headers)
also idk if you have a system to make your dev server public, but cloudflare tunnel is a decent experance of exporsing the localhost to temp url https://blog.cloudflare.com/tunnel-for-everyone/
LaPermOP
maybe this should solve the prob
okay imma try later but i have to go now :))) where r u from
that could work
LaPermOP
so i can know the time dif
but enjoy, and i hope it works!
LaPermOP
okay see ya later also I add you on disscord hope u accept
@LaPerm okay see ya later also I add you on disscord hope u accept
i don't really except friend requests from people i don't know irl
@riský i don't really except friend requests from people i don't know irl
LaPermOP
but why tho😢
because we just met... and as i said, i only have friends for people i know irl
LaPermOP
check your discord dms :))
i don't use dms for things that can be done in this server...
LaPermOP
I don't often use discord tbh. Cuz I was desperate to find a solution to this prob, i 'v been asking reddit github youtube
no solutions found 😦
@riský i don't use dms for things that can be done in this server...
LaPermOP
cuz I just don't think it a good idea to chat too long in a discussion 😢
this thread is for people to help you, for other chatting, you can use #off-topic (i am active there)