Fredkiss3
commented
1 year ago client components are still prerendered on the server so your app context will render on the server and since localStorage do not exist on the server you will have an error. If you want to opt-out of prerendering, you can use next/dynamic with SSR (prerendering) disabled.
Something like this :
"use client";
import dynamic from 'next/dynamic'
import './globals.css'
// import type { Metadata } from 'next'
// import { Inter } from 'next/font/google'
// const inter = Inter({ subsets: ['latin'] })
// export const metadata: Metadata = {
// title: 'Create Next App',
// description: 'Generated by create next app',
// }
const AppContextProvider = dynamic(() => import('@/components/appContext'), { ssr: false })
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<AppContextProvider>
<body>{children}</body>
</AppContextProvider>
</html>
)
}more info in the docs : https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr
hamidmayeli
github-actions[bot]
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
Static HTML Export (output: "export")
Link to the code that reproduces this issue or a replay of the bug
https://github.com/hamidmayeli/nextjs-spa-issue
To Reproduce
I have created a new project using `create-next-app@13.4.9` with default settings.
```bash create-next-app@13.4.9 Ok to proceed? (y) √ What is your project named? ... nextjs-issue √ Would you like to use TypeScript? ... No / Yes √ Would you like to use ESLint? ... No / Yes √ Would you like to use Tailwind CSS? ... No / Yes √ Would you like to use `src/` directory? ... No / Yes √ Would you like to use App Router? (recommended) ... No / Yes √ Would you like to customize the default import alias? ... No / Yes Creating a new Next.js app in C:\PD\nextjs-issue. ```Then I have set the `output` to `export`
```ts /** @type {import("next").NextConfig} */ const nextConfig = { output: "export", }; module.exports = nextConfig; ```After that I have created a component outside the
appfolder to separate the context logic from the layout.The AppContext
```ts import { createContext, useState, useMemo, useCallback } from "react"; interface ICurrentUser { token?: string } export const AppContext = createContext({} as { currentUser?: ICurrentUser, login: (user: ICurrentUser) => void, }); const userStorageKey = "key"; export default function AppContextProvider({ children, }: { children: React.ReactNode }) { const [currentUser, setCurrentUser] = useState(JSON.parse(localStorage.getItem(userStorageKey) ?? "{}") as ICurrentUser); const login = useCallback((user: ICurrentUser) => { localStorage.setItem(userStorageKey, JSON.stringify(user)); setCurrentUser(user); }, []); const contextValue = useMemo(() => ({ currentUser, login, }), [currentUser, login]); return (Then I use this the app context in layout wrapping the
body.The layout
```tsx "use client"; import AppContextProvider from '@/components/appContext' import './globals.css' // import type { Metadata } from 'next' // import { Inter } from 'next/font/google' // const inter = Inter({ subsets: ['latin'] }) // export const metadata: Metadata = { // title: 'Create Next App', // description: 'Generated by create next app', // } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (Describe the Bug
When I try to build the project, all pages (with this example
Home) are causing issue. Because compiler tries to pre-render this page while in theAppContextI am accessinglocalStorage.Expected Behavior
I expect to see the pages are turned into JS files and have an exported output.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
npm run build