Next.js foundations · Lesson 1 of 16

What is Next.js?

Why React alone isn't enough: server rendering, routing and project structure.

8 minutes1 games

React builds the UI, but a real app needs more: pages with URLs (routing), server data, SEO so Google sees the content, and good performance on phones. Next.js is a React framework that provides all of this, and SeaCode itself is built with it.

Mode	Where and when HTML is made	Good for
CSR	in the browser, after JavaScript loads	dashboards behind a login
SSR	on the server for every request	pages that differ per user
SSG	on the server once, at build time	blogs, docs, marketing pages
ISR / cache	cached, refreshed periodically or on demand	course catalogues, products

Next.js lets you choose per page, or even per part of a page.

You start a project with one command, and get a structure like this:

TypeScript

// npx create-next-app@latest my-app
// cd my-app && npm run dev   ->  http://localhost:3000

my-app/
├── app/
│   ├── layout.tsx      // the shell around every page (<html>, <body>)
│   ├── page.tsx        // the home page:  /
│   └── globals.css
├── public/             // static files: /logo.png
├── next.config.ts
├── package.json
└── tsconfig.json

TypeScript

// app/page.tsx: a page is just a React component exported as default
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to SeaCode</h1>
      <p>This HTML was rendered on the server.</p>
    </main>
  )
}

Quick question

An "About the academy" page has fixed content and needs SEO. Best mode?

Learn more from

Played 0 of 1 games

Next.js

Next.js foundations · Lesson 1 of 16

What is Next.js?

Why React alone isn't enough: server rendering, routing and project structure.

8 minutes1 games

Mode	Where and when HTML is made	Good for
CSR	in the browser, after JavaScript loads	dashboards behind a login
SSR	on the server for every request	pages that differ per user
SSG	on the server once, at build time	blogs, docs, marketing pages
ISR / cache	cached, refreshed periodically or on demand	course catalogues, products

Next.js lets you choose per page, or even per part of a page.

You start a project with one command, and get a structure like this:

TypeScript

// npx create-next-app@latest my-app
// cd my-app && npm run dev   ->  http://localhost:3000

my-app/
├── app/
│   ├── layout.tsx      // the shell around every page (<html>, <body>)
│   ├── page.tsx        // the home page:  /
│   └── globals.css
├── public/             // static files: /logo.png
├── next.config.ts
├── package.json
└── tsconfig.json

TypeScript

// app/page.tsx: a page is just a React component exported as default
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to SeaCode</h1>
      <p>This HTML was rendered on the server.</p>
    </main>
  )
}

Quick question

An "About the academy" page has fixed content and needs SEO. Best mode?

Learn more from

Played 0 of 1 games