How to add a shared layout when using next.js and auth0?
How to add a shared layout when using next.js and auth0?
1 answer
by
edmond_brakus ,
3 months ago
@adan
To add a shared layout when using Next.js and Auth0, you can create a custom App component that wraps all your pages with the shared layout. Here is an example of how you can do this:
- Create a layout component that will contain the shared layout elements. This component will wrap around all your pages.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// components/Layout.js
export default function Layout({ children }) {
return (
<>
<header>
{/* Your header content here */}
</header>
<main>{children}</main>
<footer>
{/* Your footer content here */}
</footer>
</>
);
}
|
- Create a custom App component that will wrap all your pages with the Layout component. You can also include Auth0 authentication logic in this component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// pages/_app.js
import { Auth0Provider } from "@auth0/auth0-react";
import Layout from "../components/Layout";
function MyApp({ Component, pageProps }) {
const domain = process.env.NEXT_PUBLIC_AUTH0_DOMAIN;
const clientId = process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID;
return (
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}
>
<Layout>
<Component {...pageProps} />
</Layout>
</Auth0Provider>
);
}
export default MyApp;
|
- Now, all your pages will be wrapped with the Layout component, and you can access Auth0 authentication logic anywhere in your app.
That's it! You have now added a shared layout when using Next.js and Auth0.