Currently, this project has a small bug / issue - the root HTML document is re-defined for every route. The fix is to define the base HTML document only once in a layout.js file inside the root folder path.

Create an app/layout.js file with the following content:

import './globals.css';

export const metadata = {
  title: 'Next.js Page Routing & Rendering',
  description: 'Learn how to route to different pages.',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

When following along with the next lecture, you'll also need to tweak the app/(content)/layout.js and app/(marketing)/layout.js files (which are created in the next lecture).

app/(content)/layout.js

(created in next lecture, adjust it after watching the next lecture)

import MainHeader from '@/components/main-header';
 
export const metadata = {
  title: 'Next.js Page Routing & Rendering',
  description: 'Learn how to route to different pages.',
};
 
export default function ContentLayout({ children }) {
  return (
    <div id='page'>
      <MainHeader />
      {children}
    </div>
  );
}

app/(marketing)/layout.js

(created in next lecture, adjust it after watching the next lecture)

export const metadata = {
  title: 'Next.js Page Routing & Rendering',
  description: 'Learn how to route to different pages.',
};
 
export default function MarketingLayout({ children }) {
  return <main>{children}</main>;
}