1 · Structure and rendering · 30 MIN

Routes, layouts and internal links

Folders define routes and layouts compose their surrounding UI.

A page exports the content for one route, while a layout wraps its child routes. Next Link creates an internal navigation link without making a button impersonate navigation. Place global structure in the root layout and route-specific structure in the page. The root layout must provide html and body. Links also expose real destinations to crawlers and work with browser actions such as opening another tab. Keep one main region for the active page rather than nesting a main inside every surrounding layout.

Place the two exports in their separate stated files.

Read the example

// app/layout.tsx
import Link from 'next/link';
import type {ReactNode} from 'react';
export default function Layout({children}:{children:ReactNode}) {
  return <html lang="en"><body><header><Link href="/">Home</Link> <Link href="/courses">Courses</Link></header>{children}</body></html>;
}
// app/courses/page.tsx (separate file)
export default function Courses(){return <main><h1>Course catalog</h1><p>Choose a syllabus before starting.</p></main>}

Check the expected output

Visiting /courses shows shared navigation and the Course catalog page.

Your challenge

Add a /courses/react page and link to it from the catalog; verify direct navigation and browser back.

Solution cost: O(v) rendering work for v elements. time · O(v) rendered tree. space

Common trap

Two default exports in a single file are invalid; file boundaries are part of this exercise.

Study the project implementation

// app/layout.tsx
import Link from 'next/link';
import type {ReactNode} from 'react';
export default function Layout({children}:{children:ReactNode}) {
  return <html lang="en"><body><header><Link href="/">Home</Link> <Link href="/courses">Courses</Link></header>{children}</body></html>;
}
// app/courses/page.tsx (separate file)
export default function Courses(){return <main><h1>Course catalog</h1><p>Choose a syllabus before starting.</p></main>}

Open guided workshop →See the syllabus