Server Rendering

Objectives

Tailwind CSS will be used for presentation. It can be automatically included and configured when creating your applications.

Figure 1 (opens in a new tab): Country facts using server (static) rendering

Reimplement the 7.2 Country Facts application, using React and Next.js.

bunx create-next-app@latest 01-country-facts --app --javascript --react-compiler --tailwind --biome --no-src-dir --import-alias "@/*"

Use a dynamic route with optional catch-all slug (opens in a new tab), [[...slug]], to handle routing and navigation.
Implement the generateStaticParams() function to generate paths for the root page, all regions, all subregions, and all countries.
Apply different rendering methods, such as dynamic and static, to render the facts for every country.
Build your application using bun run build then start it using bun run start. Take note of the observed differences.
Export your application by first updating next.config.mjs, then running bun run build:
next.config.mjs
```
const nextConfig = {
  output: "export",
};
```
Install serve (opens in a new tab) and use it to serve the static out directory.

Reimplement the 8.1 Task Tracker application, using React and Next.js.

Reimplement the 8.2 Bank Accounts application, using React and Next.js.