Nextjs 13 multiple language
Answered
Mhamad Othman posted this in #help-forum
I have a Nextjs 13 app and I want to add an option for users to change languages I tried next-intl and it didn't work for me, what is the ultimate solution?
Answered by ncls.
7 Replies
Answer
Barbary Lion
Why didn't it work? I had a few issues when trying to implement it on one of my websites, but I got it to work -- there were some file placement issues that weren't clear enough in the docs. I can try and help you with it
I have done what the docs said for next-intl and in localhost3000/ in my home I get a 404 error page not found
This works but I don't want to have my home page for default be like localhost3000/en/ is there a way to make default not shown? / be en and /nl/ be the Dutch lang
I never worked with it. There's probably some hacky workaround but I think having it shown in the URL is the cleanest approach since that will be consistent over all languages. E.g. when I share a link with someone who doesn't speak german I usually swap the
de
in the URL with a en
intuitively.Barbary Lion
Yes, there is. Check out your middleware.js file, it should define the defaultLocale, like the following example:
import createMiddleware from "next-intl/middleware";
export default createMiddleware({
// A list of all locales that are supported
locales: ["en", "pt-br"],
// If this locale is matched, pathnames work without a prefix (e.g.
/about)
defaultLocale: "en",
});
export const config = {
// Skip all paths that should not be internationalized. This example skips the
// folders "api", "_next" and all files with an extension (e.g. favicon.ico)
matcher: ["/((?!api|_next|.*\\..*).*)"],
};
Thank you guys so much ðŸ™