Next.js

Next.js is one of my favorite tools for developing full-stack web apps.
This content assumes you're using the Next.js 15 App Router.
2024-11-22

A "web app" is typically a piece of software that...

  1. Runs in a browser (Chrome, Firefox, Safari, Edge, Chromium, etc.)
  2. Contains interactive content

What differentiates web apps from websites is the kinds of interactions someone can perform. There's no simple binary between "website" and "web app", it's more of a spectrum that software can fall along.

Web System Spectrum

Website
Web App
Self-contained
Static, read-only content
Content is the same for all users
Talks to external systems
Dynamic, interactive content
Content depends on the user

generateStaticParams

generateStaticParams is a function that allows you to determine dynamic-routes at build-time instead of runtime. This will let you query a database or other external system for data once, when the software is built.

This can greatly reduce your cloud infrastructure overhead if you have dynamic content that can be determined ahead of time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Return a list of `params` to populate the [slug] dynamic segment export async function generateStaticParams() { const posts = await database.query(...); return posts.map((post) => ({ slug: post.slug, })) } // Multiple versions of this page will be statically generated // using the `params` returned by `generateStaticParams` export default async function Page(props: { params: Promise<{ slug: string }> }) { const { slug } = await props.params; // Query for the full set of data by the `slug` param const post = await database.query(...); // Render static content // ... }

export const dynamic = "force-static";

export const dynamic = "force-static"; will force your page/route to be static. Any dynamic functions (cookies, headers, etc.) will return empty values.

Any data fetched by the page will be fetched one at build time.

By using generateStaticParams and export const dynamic = "force-static";, you can render all pages in your Nest.js web app at build time.

You can still use Client Components if you want highly-interactive content.