PGM5/2 - Next.js: introductie

Next.js

Introductie

Next.js

Next.js enables you to create high-quality web applications with the power of React components.

Full-stack framework
Extremely popular:
13 million weekly downloads on npm
Not without controversy

Next.js

Why Next.js and not a competitor?
- TanStack Start
  - Still in beta
- Remix
  - Unclear where it's going

Next.js

Built on top of React
Consists of:
- Compiler
- Command Line Interface (CLI)
- Node.js runtime
Full-stack, thus allows us to write front-end and
back-end code in the same project

Next.js

Installation
- ⚠️ Specifieer v15.5.2 want Next.js verandert snel!

npx create-next-app@15.5.2
What is your project named? my-first-next-app
Would you like to use TypeScript? Yes
Which linter would you like to use? ESLint
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack? (recommended) Yes
Would you like to customize the import alias (`@/*` by default)? No

Next.js

create-next-app genereert:
- Configuration files:
  - Next.js
  - ESLint
  - TypeScript
  - PostCSS
- .gitignore

Next.js

create-next-app genereert:
- public folder
  - publieke assets: images, videos, fonts ...
- next-env.d.ts
  - ensures Next.js types are picked up by the TypeScript compiler

Next.js

create-next-app genereert:
- src/app
  - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx

Next.js

Rendering environments

We moeten eens praten over full-stack
- Client(-side) rendering → client components
- Server(-side) rendering → server components (RSC)
  - Static (build time)
  - Dynamic (request time)

Rendering environments

Client-side rendering
- Large bundles
- Resource-intensive
- No SEO
- Less secure

Rendering environments

Server-side rendering
- Smaller bundles
- Resource efficient
- SEO
- More secure

Rendering environments

⚠️ Maar server components kunnen NIET:
- Luisteren naar browser events
- Web APIs aanspreken
- State beheren
- Effects gebruiken
- ...

Rendering environments

Daarom, als vuistregel:
- Server components: zo veel mogelijk
- Client components: enkel wanneer nodig
  - ⚠️ Hou client components zo klein mogelijk

Rendering environments

Hoe herken je het type component in Next.js?
- Standaard: server
- Expliciet markeren met directives
  - use client
  - use server

Rendering environments

Onthou ook alvast volgende concepten:

Streaming

Server stuurt initieel een fallback UI
- Skeleton loaders/screens
- Spinners
- ...
Ondertussen wordt data opgehaald en de
actual UI samengesteld
- Zodra opgehaald: server stuurt de actual UI
Hydration (React)

Streaming

Streaming

Why skeleton loaders/screens?
- Prevent users from thinking the site isn’t working
- Illusion of a shorter wait time
- Reduce cognitive load

Next.js

Routing - part 1

Routing

Next.js heeft 2 verschillende routing-mechanismen:
- App Router ✅
- ~~Pages Router~~ ❌
Waarom kiezen wij App Router?
- Meer flexibiliteit 👍
- "Pages Router is still supported but
  App Router is recommended" 👍
- Complexer 👎

Routing

⚠️ Als je de documentatie van Next.js bekijkt, let er dan altijd op dat je App Router selecteert

Routing

Filesystem-based routing
- De naamgeving en structuur van onze files en folders bepaalt hoe de routing werkt
- cf. TanStack Router (PGM4)
- Convention > configuration

Routing

Belangrijkste routing files (.tsx)
- page
- layout
- loading
- not-found
- error
- route

Routing

Belangrijkste routing folders
- src
- app
- pages
- public

Routing

⚠️ Gebruik geen <a> tags voor interne links
- Dit negeert de Next.js-router en zal steeds alle assets (JS, CSS ...) opnieuw downloaden
  → gebruik steeds <Link>
- Voor externe links kan je wel <a> gebruiken

Prefetching

Prefetching makes navigation feel instant
- When a <Link> enters the viewport,
  it is automatically prefetched
  - Only under certain conditions
  - Dynamic vs static pages

Prefetching

Prefetching makes navigation feel instant
- Runs only in production
- To make a production build:

npm run build
npm run start

Routing - terminologie

Routing - voorbeeld

Routing - layouts

layout.tsx
- UI shared between multiple pages
- applies to leaf routes if no separate layout.tsx present

Routing - layouts

app/layout.tsx
- Root layout: required
- automatically generated with create-next-app

Routing

Styling active links
- usePathname
  - Only works client-side
- Often done with clsx or classnames
  - ⚠️ Extra dependency → management cost

Routing - voorbeeld

Oefening (deel 1):
- / → homepagina
- /about → wat info over onszelf
- /users → tabel met 10 users (2 col: name + email)
- Horizontale top nav
  - Style the active link

Next.js

Data fetching

⚠️ How-to depends on the rendering environment
- Server components
  - fetch
  - ORM
- Client components
  - use
  - TanStack Query

Data fetching

⚠️ Next.js extends the Web fetch API
- Some extra options regarding caching
If we fetch data in a server component, by default Next.js will statically render the page
- 💥 Let's see this in action!
- To make Next.js render this dynamically,
  we need to specify the cache options (see above)

Data fetching

Oefening (deel 2)
- / → homepagina
- /about → wat info over onszelf
- /users → tabel met name + email (https://jsonplaceholder.typicode.com/users)
- ⚠️ Don't forget to create an interface/type for a user
  and use it appropriately!

Next.js

Routing - part 2

Dynamic route segments

Terminology recap:
- http://localhost:3000/users/1
  - Path param(eter), route param ...
  - Next.js: dynamic route segment
- http://localhost:3000/users?name=abc
  - Query param, URL param ...
  - Next.js: search param(eter)

Dynamic route segments

Convention for a dynamic route segment on id
- Folder:
  [id]
- Props:
  { params: Promise<{ id: string }> }

💥 Let's see this in action!

Dynamic route segments

/* Dynamic route segment example
 * e.g. folder src/app/products/[id]/page.tsx
 */
export default async function ProductDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const p = await params;
  const id = p.id;
  const response = await fetch(`https://dummyjson.com/products/${id}`, {
    cache: "no-store",
  });
  const product = await response.json();

  return <h2>{product.title}</h2>;
}

Dynamic route segments

Oefening (deel 3)
- / → homepagina
- /about → wat info over onszelf
- /users → tabel met name + email
  - name → Link naar detailpagina
- /users/:id → detailpagina (name, email, phone ...)
  (https://jsonplaceholder.typicode.com/users/1)

Query parameters

For retrieving search / query / URL params on a page:
- Props:
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>

💥 Let's see this in action!

Query parameters

Oefening (deel 4)
- / → homepagina
- /about → wat info over onszelf
- /users → tabel met name + email
  - name → Link naar detailpagina
  - filter on username with search parameter
- /users/:id → detailpagina (name, email, phone, website ..)

Query parameters

Oefening (deel 4)

Next.js

Loading

We can implement a loading UI with loading.tsx
- Skeleton loaders
- Spinners
- Loading message
- ...
💥 Let's see this in action!

Loading

The JSONplaceholder API is super fast.
So, how can we test the loading UI?
1. Browser DevTools → Network → 3G
2. delay

Loading

Oefening (deel 5)
- We have 2 pages where data is fetched
  - /users
  - /users/:id
- While data is fetched, show "Loading ..."
  → loading.tsx

Skeleton loaders

Options for implementing skeleton loaders?
1. react-loading-skeleton
2. Built-in to component library
  - shadcn
  - Radix UI
  - Daisy UI
  - ...
3. Do It Yourself 🔥

Skeleton loaders

How-to:
- Copy-paste the UI from page.tsx to loading.tsx
- Replace back-end data with the skeleton
- Use your brains! 🧠
- Test to see if it's working as expected
💥 Let's see this in action!

Loading

Oefening (deel 6)
- /users → implement skeleton loader
- Use react-loading-skeleton

Next.js

Styling

We recommend using global styles for truly global CSS (like Tailwind's base styles), Tailwind CSS for component styling, and CSS Modules for custom scoped CSS when needed.

- Source: Official Next.js docs

Styling

Why CSS Modules or Tailwind?
- Prevent style collision
- Avoid unused or duplicate CSS
- Code completion
  → VS Code extension (CSS Modules)
  → VS Code extension (Tailwind CSS IntelliSense)
💥 Let's see this in action!

Styling

With CSS Modules, remember:
- Filename: component-name.module.css
- Apply lowerCamelCase for class names
- Use classes for local (component) styles
- Put global selectors in globals.css

Styling

What approach should you take?
- Preferably the recommended one
- If not:
  - Do not put everything in globals.css
  - Make sure there is no collision
  - Be prepared to explain the disadvantages

Next.js

Introductie

Next.js

Next.js

Next.js

Next.js

Next.js

Next.js

Next.js

Rendering environments

Rendering environments

Rendering environments

Rendering environments

Rendering environments

Rendering environments

Rendering environments

Rendering environments

Streaming

Streaming

Streaming

Streaming

Streaming

Routing - part 1

Routing

Routing

Routing

Routing

Routing

Routing

Prefetching

Prefetching

Routing - terminologie

Routing - voorbeeld

Routing - voorbeeld

Routing - layouts

Routing - layouts

Routing

Routing - voorbeeld

Data fetching

Data fetching

Data fetching

Data fetching

Routing - part 2

Dynamic route segments

Dynamic route segments

Dynamic route segments

Dynamic route segments

Query parameters

Query parameters

Query parameters

Loading

Loading

Loading

Loading

Skeleton loaders

Skeleton loaders

Loading

Styling

Styling

Styling

Styling

Styling

PGM5/2 - Next.js: introductie

More from kareldesmet