Skip to content

Commit

Permalink
fix: next.js 15 ssr changes (#4486)
Browse files Browse the repository at this point in the history
* Fix SSR issues with headers and localStorage

Fixes #4477

Resolve the issue with `headers()` not being awaited in Next.js 15+.

* Await `headers().get('cookie')` in `RootLayout` component in `packages/create-wagmi/templates/next/src/app/layout.tsx`.
* Await `headers().get('cookie')` in `RootLayout` component in `playgrounds/next/src/app/layout.tsx`.

* Update ssr.md
  • Loading branch information
Royal-lobster authored Dec 30, 2024
1 parent 5e93031 commit 54a91f1
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 6 deletions.
4 changes: 2 additions & 2 deletions packages/create-wagmi/templates/next/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ export const metadata: Metadata = {
description: 'Generated by create-wagmi',
}

export default function RootLayout(props: { children: ReactNode }) {
export default async function RootLayout(props: { children: ReactNode }) {
const initialState = cookieToInitialState(
getConfig(),
headers().get('cookie'),
(await headers()).get('cookie'),
)
return (
<html lang="en">
Expand Down
4 changes: 2 additions & 2 deletions playgrounds/next/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ export const metadata: Metadata = {
description: 'Generated by create-wagmi',
}

export default function RootLayout(props: { children: ReactNode }) {
export default async function RootLayout(props: { children: ReactNode }) {
const initialState = cookieToInitialState(
getConfig(),
headers().get('cookie'),
(await headers()).get('cookie'),
)
return (
<html lang="en">
Expand Down
4 changes: 2 additions & 2 deletions site/react/guides/ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@ import { cookieToInitialState } from 'wagmi' // [!code ++]
import { getConfig } from './config'
import { Providers } from './providers'

export default function Layout({ children }: { children: ReactNode }) {
export default async function Layout({ children }: { children: ReactNode }) {
const initialState = cookieToInitialState( // [!code ++]
getConfig(), // [!code ++]
headers().get('cookie') // [!code ++]
(await headers()).get('cookie') // [!code ++]
) // [!code ++]
return (
<html lang="en">
Expand Down

0 comments on commit 54a91f1

Please sign in to comment.