Nextjs AppRouter How to set up? #3887

XOneto9 · 2024-06-09T08:33:55Z

XOneto9
Jun 9, 2024

Hi.
My project is made up Nextjs with App router.
Before common way to build up website(page router system), The page router in nextjs is easy to apply.
However, The AppRouter is not a using _app.js, also _document.js. So I found searching "Layout.js"(root layout) way to where I apply this code.

// Layout.js
const RootLayout = ({ children }) => {
    const handleKakaoInit = () => {
        window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY);
    };

    return (
        <html lang="en">
            <head>
                <title>Dev</title>
                <meta name="description" content="Dev-test" />
            </head>
            <body>
                 // wrap provider
                <StoreProvider>
                    <main>{children}</main>
                </StoreProvider>

                <Script
                    src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
                    strategy="afterInteractive"
                    integrity={process.env.NEXT_PUBLIC_URL_INTEGRITY}
                    crossOrigin="anonymous"
                    onLoad={handleKakaoInit}
                />
            </body>
        </html>
    );
};

But I don't know set
<StoreProvider {...pageProps} initialState={pageProps.initialState}>

//_app.js

import { StoreProvider } from '../store/StoreProvider'

export default function App({ Component, pageProps }) {
  return (
        //HERE !!!!!!
        // <StoreProvider {...pageProps} initialState={pageProps.initialState}>
    <StoreProvider {...pageProps}>

      <Component {...pageProps} />
    </StoreProvider>
  )
}

Let me know how to alternate above code in AppRouter nextjs

<StoreProvider {...pageProps} initialState={pageProps.initialState}>
<StoreProvider {...pageProps}>```

XOneto9 · 2024-06-11T14:58:22Z

XOneto9
Jun 11, 2024
Author

self answer

FIrst, The _app.js code is applied to Rootlayout.js
Second, I was using a Mobx-persist-store. For persisting data, when refresh webpage, I use a useState function to synchronize srr with client.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nextjs AppRouter How to set up? #3887

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Nextjs AppRouter How to set up? #3887

XOneto9 Jun 9, 2024

Replies: 1 comment

XOneto9 Jun 11, 2024 Author

XOneto9
Jun 9, 2024

XOneto9
Jun 11, 2024
Author