Can I use the next-intl for client components and the server next-intl in one nextjs.13.5 project.

[temtechie]

Is your feature request related to a problem? Please describe.

to be able to use the next-intl both in my client and server component in one nextjs.13.5 projetc.

i want to achieve this because my components are mixed , some are server components while some are server components

Describe the solution you'd like

N/A

Describe alternatives you've considered

N/A

[HakkaOfDev]

You can easily use for both with the same hook, you just need to setup both side, the i18n getRequestConfig + middleware for server side and the provider + the fetch messages for client one (+navigation if you're using next-intl 3)

[temtechie]

I am using "next-intl": "^2.20.2",

[temtechie]

can you send a code snippet?

[HakkaOfDev]

I can't right now but you just have to follow both installations on the doc website, if you would need help, you can add me on discord!

[temtechie]

I am trying to write a helper function

export default async function getMessages(locale: string) {
    try {
        let messages = (await import(`../../messages/${locale}.json`)).default;
        localStorage.setItem('messages', JSON.stringify(messages))
    } catch (error) {
        console.log(error);
    }
}

this function will be exported to layout.tsx,

then i will take the messages from localStorage and pass it into the NextIntlClientProvider

[HakkaOfDev]

Why ? It's useless.
Like first you can't access to localStorage because this function is running on the server side.

• you don't need messages in storage for anything, I don't get it where you want to go with that..

[temtechie]

you are right

[amannn]

I guess this is resolved, then? This is the guide in the docs that covers Server and Client Components.

[luisjuniorj]

I guess this is resolved, then? This is the guide in the docs that covers Server and Client Components.

i think is missing the middleware, because the middleware on server and client are exact opposites each other.

client

export const config = { // Skip all paths that should not be internationalized. This example skips // certain folders and all pathnames with a dot (e.g. favicon.ico) matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"], };

server

export const config = { // Match only internationalized pathnames matcher: ["/", "/(pt-BR|en)/:path*"], };

i just can't get them both to work, it's not clear if it is loading the messages two times, as we have them in the layout and in the plugin(nextjs config)