CODEWITHSUNDEEP
javascriptreactjsnext.js
Eugene Mandelshtam
Eugene Mandelshtam

Reputation: 37

How can i do this in Next Js

In the NextJs application I want to add a route /cabinet with navigation, despite the fact that the application itself already has a navigation bar defined in _app.js, is it possible to add an analog of _app.js for /cabinet and /cabinet/something. That is, add navigation for a separate directory with routes.

- pages
-- api
-- app.js
-- index.js
-- cabinet
--- settings.js
--- panel.js

Upvotes: 1

Views: 401

Answers (1)

jdaz
jdaz

Reputation: 6053

The docs don't mention any possibility of having multiple _app.js files, and I didn't see any allowance for it in a quick glance through the Next.js source either. So, you can either:

  1. Refactor the nav bar into its own component and only import it where you need it, rather than leaving it in _app.js. (This is probably advisable.)

  2. Or, modify _app.js to only render the regular navbar for urls outside the cabinet directory. You'll need to add the router prop to the component's parameter list, which is always there but not shown in the docs page for _app.js:

    function MyApp({ Component, pageProps, router }) {
  const isCabinet = router.pathname.includes("/cabinet/");
  return <>{ isCabinet ? <CabinetNav /> : <Nav /> }
    <Component {...pageProps} />
  </>;
}

Upvotes: 2

Related Questions