Server Rendering

Objective

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.

npx create-next-app@latest 01-country-facts --turbopack --app --javascript --tailwind --eslint --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 npm build then start it using npm start. Take note of the observed differences.
Export your application by first updating next.config.mjs, then running npm 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.