Question 266859 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – In Next JS, changes in layout.tsx only applies to home page, other pages are not affected?

I have a Next JS app, the version is 13.5.4, its structured like this:

- pages
-- about.tsx
- src
-- app
--- layout.tsx
--- page.tsx

In order to not repeat code, I changed the default layout.tsx to this:

import './globals.scss'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import {Navbar} from "@/app/components/Navbar/navbar";
import {Footer} from "@/app/components/Footer/footer";

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Navbar /> // ---- added this
          {children}
        <Footer /> // ---- added this
      </body>
    </html>
  )
}

My goal is to have Navbar and Footer on every page by default. Now the problem is, they are on homepage, i.e. applied to page.tsx. But they are not on /about. Any idea why?

Here is the navbar.tsx which routes to the /about.

import Link from "next/link";
export const Navbar = () => {
  return (
    <nav>
      <div>
        <ul>
          <li>
            <Link href="/#">Home</Link>
          </li>
          <li>
            <Link href="/about">About</Link>
          </li>
        </ul>
      </div>
    </nav>
  )
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @evolutionxbox, I found the answer on official doc: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app here enter image description here The solution is:

    1. add a /pages/_document.tsx as follows:
    import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
      <Main />
      <NextScript />
      </body>
    </Html>
  )
}
    1. add a /pages/_app.tsx as follows:
    import Layout from "@/app/layout";
import { AppProps } from "next/app";

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

    Then there should be no need to add import in the /src/app/page.tsx or /pages/about.tsx, they should simply be like:

    export default function About() {
  return (
    <div>
      About me
    </div>
  )
}

  2. 0

    Since there’s going to be only the Navbar exported, Instead of exporting the NavBar using an arrow function can you declare Navbar as a function and then export it as default?

    Like

    function Navbar() {/*Nav Code*/}
export default Navbar;

    and then import it using,

    import Navbar from './path/to/navbar';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search