Next.js

Layouts and Pages

by Tomas Trescak t.trescak@westernsydney.edu.au

Next.js

/

Layout and Pages

Next.js

/

Pages

    import styles from "./index.module.css";

export default async function Home() {
  return (
    <main className={styles.main}>
      Home Page
    </main>
  );
}
/src/app/page.tsx
Definition : UI rendered at a specific route
e.g. /post/my-blog-post or /posts
https://localhost:3000

Next.js

/

Pages

/src/app/ page.tsx
Definition : UI rendered at a specific route
e.g. /post/my-blog-post or /posts
https://localhost:3000

Next.js

/

Pages

/src/app/ posts / page.tsx
Definition : UI rendered at a specific route
e.g. /post/my-blog-post or /posts
https://localhost:3000/ posts

Next.js

/

Pages

/src/app/ posts/deep/link / page.tsx
Definition : UI rendered at a specific route
e.g. /post/my-blog-post or /posts
https://localhost:3000/ posts/deep/link

Next.js

/

Dynamic Pages

/src/app/ post/[urlid] / page.tsx
https://localhost:3000/ post/my-blog-post 
    type Params = { urlid: string };

async function Home({ params }: { params: Promise<Params>}) {
  const { urlid } = await params;
  const post = loadPost(urlId)
  return (
    <main>
      <h1>{post.title}</h1>
    </main>
  );
}

Next.js

/

Pages with Search Params

/src/app/ post / page.tsx
https://localhost:3000/ post ?id=3 
    type SearchParams = { id: string };

async function Home(
  { searchParams }: { searchParams: Promise<SearchParams>}
) {
  const { id } = await searchParams;
  const post = loadPost(id)
  return (
    <main>
      <h1>{post.title}</h1>
    </main>
  );
}

Next.js

/

Links

    import Link from "next/link";

async function Home() {
  return (
    <main>
      <a href="/posts">Posts</a>
      <Link href="/posts">Posts</Link>
    </main>
  );
}

Next.js

/

Layouts

  • UI shared across multiple pages

Next.js

/

Layouts

    export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <header>My Blog Header</header>
        <main>{children}</main>
        <footer>My Blog Footer</footer>
      </body>
    </html>
  );
}
/src/app/layout.tsx
UI shared across multiple pages

Next.js

/

Layouts

    export default function RootLayout({ children }: {
  children: React.ReactNode
}) {
  return (
    <div>
      <nav>
        <Link href="/posts/categories">Categories</Link>
        <Link href="/posts/dates">Dates</Link>
        <Link href="/posts/tags">Tags</Link>
      </nav>
      <main>
        {children}
      </main>
    </html>
  );
}
/src/app/ posts /layout.tsx
UI shared across multiple pages