Headers, Page/Layout Params and cookies are now asynchronous

[ishownobitches]

Describe the feature / bug 📝:

[ Server ] Error: Route "/" used headers().get('x-language-tag'). headers() should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

Steps to reproduce the bug 🔁:

1. Install dependencies
2. Set up environment variables
3. Run the dev server

[rishabh-hub]

Any solutions on how to fix this that worked for you @ishownobitches ? I am unable to even locate where this occurs exactly. Any help would be appreciated

[juancarlosqr]

The issue comes from the paraglide dependency:

https://github.com/opral/inlang-paraglide-js/issues/245

But they are not willing to switch to the new async API:

• https://github.com/opral/inlang-paraglide-js/issues/245#issuecomment-2608727658

A discussion in the Next.js repo is open about this:

https://github.com/vercel/next.js/issues/69298 (original issue - closed) https://github.com/vercel/next.js/discussions/76582

Options here are:

1. Wait for the discussion to see if get a functional resolution
2. Switch to paraglide-js (paraglide-next is deprecated now - but not sure if that would solve the issue)
3. Switch to another i18n library that supports the new async API in Next.js

What are your thoughts @Skolaczk?

[samuelstroschein]

Paraglide maintainer here.

Switch to paraglide-js 2.0 (paraglide-next is deprecated now - but not sure if that would solve the issue)

The issue remains in Paraglide JS 2.0 as well. Switching to the async API is not possible. Rumors are that NextJS is introducing sane middleware (eventually). They made a first step with node middleware support https://github.com/vercel/next.js/discussions/71727.

Switch to another i18n library that supports the new async API in Next.js

Next-intl would be the standard choice.