Containers shared among Next.js pages within a folder

Question

Containers shared among Next.js pages within a folder

Is it possible to have a shared container for all pages within a specific folder in NextJS?

One potential solution could involve the following code:

// pages/folder/index.js
export default function Container({ children }) {
    return <Container>{children}</Container>
}

// pages/folder/child.js
export default function Child() {
    return <Child />
}

javascript next.js server-side-rendering

Answer 1

Answer №1

For the solution you seek, consider exploring Layouts.

// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

Creating a Single Shared Layout with Custom App

// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

Different Layouts for Each Page

// pages/index.js

import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'

export default function Page() {
  return (
    /** Your content */
  )
}

Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

// pages/_app.js

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

Answer 2

For the solution you seek, consider exploring Layouts.

// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

Creating a Single Shared Layout with Custom App

// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

Different Layouts for Each Page

// pages/index.js

import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'

export default function Page() {
  return (
    /** Your content */
  )
}

Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

// pages/_app.js

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

Answer 3

Answer №2

One challenge with NextJS is the lack of consensus within the community regarding shared state and layout management.

To overcome this issue, my team at work found a solution by utilizing a custom app component. Another option, as mentioned by @rantao, is to implement a layout.

/* _app.js */
export default function _App({ Component, pageProps }){
    const navigationEnabled = Component?.navigation ?? true;
    const footerEnabled = Component?.footer ?? true;

    // This is just an example. Feel free to customize your own components and layout.
    return <>
        { navigationEnabled === true && <Navigation />}
        <Component {...pageProps />
        { footerEnabled === true && <Footer />}
    </>;
}

/* page.js */
export default function Page(){}
// Don't display the navigation on this page. 
Page.navigation = false;

Answer 4

One challenge with NextJS is the lack of consensus within the community regarding shared state and layout management.

To overcome this issue, my team at work found a solution by utilizing a custom app component. Another option, as mentioned by @rantao, is to implement a layout.

/* _app.js */
export default function _App({ Component, pageProps }){
    const navigationEnabled = Component?.navigation ?? true;
    const footerEnabled = Component?.footer ?? true;

    // This is just an example. Feel free to customize your own components and layout.
    return <>
        { navigationEnabled === true && <Navigation />}
        <Component {...pageProps />
        { footerEnabled === true && <Footer />}
    </>;
}

/* page.js */
export default function Page(){}
// Don't display the navigation on this page. 
Page.navigation = false;

Containers shared among Next.js pages within a folder

Answer №1

Answer №2

Similar questions

Eliminate the Div Attribute once the radio button is activated

Iterating through a series of AJAX requests in JavaScript until the variable equals "No" and then terminating the loop

Keeping the Bootstrap popover anchored to the content

Find out if a dynamically imported component has finished loading in Nextjs

Replace the hyphen with a comma using JavaScript

Using Vue.js watchers can sometimes cause an endless loop

Toggle the Editable Feature in AngularJS JSON Editor

Check the schedule for any upcoming events

magnetic container: stationary container nested within absolutely positioned container

An error was thrown: SyntaxError - { was not expected in script.js on line 5 while checking request

Guide to connecting two geometric shapes together with the help of three.js

Creating a front-end angular application with npm and grunt commands

Using JSON with Google Chart Tools

Getting the ID of a select input option in Vue.js using FormulateInput

Organize a list using custom span values with JavaScript

Connecting Node.js and Express with MySQL database

jquery.event.drag - Execute code for each increment of X pixels dragged

Tips for avoiding HTML <tags> in the document.write function

byte sequence displays as binary data (angular + express)

Unable to use onSubmit with enter key in render props (React)