Proper way to display different header information according to the current page in Next.js

Question

I need to display a Language switch button in the top navigation bar of my site (rendered inside a Layout). Obviously, the switching URL depends of the current page.

Considering the following "design" limitations of Next.js App v13+ router:

• usePathname() does not work Server-Side.
• headers() is not accessible when pages are statically generated, so injecting the pathname in the headers using the middleware is not possible.
• I cannot pass the client component every localized URL of every page in advance, this would produce an abnormally large payload size, we have thousands of pages.

What is the proper way of doing this?

The only workaround I have found is to inject the pathname in the headers using the middleware and force dynamic page generation.

Answer 1

Next.js has a nice doc on internationalization with app router. It has examples with how to use it with server components and static generation. Also there is a reference on i18n integration.