1

I'm currently using Next JS 13 with Redux. in Next js 12 i can wrap my whole app with Provider inside ./pages/_app but how can i wrap using Next JS 13?

Below is my code to layout.js

import "../styles/globals.css";
import BottomBar from "./BottomBar";
import Drawer from "./Drawer";
import Header from "./Header";
import { store } from "../store";
import { Provider } from "react-redux";
export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body>
        <Provider store={store}>
          <Header />
          <Drawer />
          {children}
          <BottomBar />
        </Provider>
      </body>
    </html>
  );
}
Mohammed Bekele
  • 727
  • 1
  • 9
  • 25

1 Answers1

2

https://beta.nextjs.org/docs/rendering/server-and-client-components#rendering-third-party-context-providers-in-server-components

  1. Create Providers component and add the providers.

// app/providers.js
'use client';

import { ThemeProvider } from 'acme-theme';
import { AuthProvider } from 'acme-auth';

export function Providers({ children }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        {children}
      </AuthProvider>
    </ThemeProvider>
  );
}
  1. Insert Providers into the RootLayaut.

import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

How I do it:

1)

'use client';

//redux
import { Provider } from 'react-redux';
import store from '@root/src/redux';

export function Providers({ children }: { children: React.ReactNode }) {
  return <Provider store={store}>{children}</Provider>;
}

2)

import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" id="rootHTML">
      <head />
      <body>
        <Providers>
          <Navbar></Navbar>
          {children}
        </Providers>
      </body>
    </html>
  );
}
AlfonsoM0
  • 21
  • 5