hackyourfuture.dk

Session Plan

Next.js

Why Next.js?

  • Purpose of Next.js

Server-Side Rendering (SSR) and Static Site Generation (SSG)

Explanation of SSR and SSG

  • Define Server-Side Rendering (SSR) and Static Site Generation (SSG)

  • Explain the benefits of SSR and SSG over client-side rendering

Use cases for SSR and SSG

  • Discuss when to use SSR (dynamic data, personalization, etc.)

  • Discuss when to use SSG (static content, blogs, documentation, etc.)

Server Components for SSR

  • Explain how Server Components can speed up load times by directly sending HTML to the browser

  • Introduce the "use server" directive, allowing React components to be rendered on the server

When to Use Client vs. Server Components?

  • Re-iterate how Next.js distinguishes client and server components ("use server" and "use client")

  • Illustrate how these fit into the SSR and SSG concepts

Introduction to Next.js App Router

Overview of Next.js routing system

  • File-based routing system in Next.js

  • Dynamic Routes

  • Mention the Next.js Link Component & why it is used

Advantages over traditional client-side routing

  • Improved performance with built-in server-side rendering and static site generation

  • Simplified routing configuration

  • Nested layouts and nested routes

Basic Next.js Routing

  • Explanation of routes

  • Creating subfolders in app directory with page.jsx file.

  • Create a component that defines a page

Next.js Router Hooks

Understanding the useParams Hook

  • Explain the purpose of the useParams hook

  • Discuss how to use the [] bracket notation to mark params in a folder/filename

  • Demonstrate how to use useParams to access the params of the current path

Understanding the useSearchParam Hook

  • Explain the purpose of the useSearchParams hook

  • Demonstrate how to use useSearchParams to access the query strings

Working With the useRouter Hook

  • Introduce the <Link> component for most links

  • Discuss the need for redirects in web applications (authentication, URL changes, etc.)

  • Introduce the useRouter hook

  • Explain how to access various router properties (push, replace, etc.)

  • Demonstrate programmatic navigation using router.push and router.replace

Advanced: Server Functions & API Routes

Server Functions

  • Explain Server Functions (previously "Server Actions") as a mechanism to run JavaScript code on the server that hosts the website

  • Discuss how this is different from running JavaScript in the user's browser

  • Reference the React docs for Server Functions demonstrating how to use them

Server Components

  • Discuss how Server Components allow the use of Server Functions inside the component

  • Explain that client components can use Server Functions by importing them from a file with the "use server" directive

Server Actions

  • Introduce "Server Actions" as a specific type of Server Function

  • Provide context by mentioning plain old <form>s on the internet that can be sent to a server for processing (we could call them "server functions"!)

  • Explain how attaching a Server Function to a (form) action makes it a Server Action

API Routes

Vercel

Introducing Vercel & Good Use Cases

  • Introduce Vercel as the company behind Next.js, as well as a provider of cloud infrastructure

  • Explain how Vercel's hosting options allow developers to host Next.js applications with very little effort

  • Highlight that hosting on Vercel is a good fit for a prototype or portfolio website built with React and/or Next.js

Connecting a GitHub Repository With Vercel

  • Demonstrate in the browser how a public GitHub repository from ones account can be connected to Vercel and deployed with the click of a button

  • Illustrate one way to get started with Vercel by installing the Vercel CLI globally npm -g vercel

  • Show logging in to Vercel using vercel login and using ones GitHub account

  • Show how one can deploy a local folder with a Next.js app using the vercel deploy CLI command

Limitations of Vercel

  • Mention that Vercel probably works best for hosting Next.js applications or static websites

  • Discuss how other frameworks are supported, but that the focus is likely on Next.js

  • Mention that knowledge about DNS, domains, npm, dependencies etc. is not required, but useful when managing a site on Vercel

  • Highlight that Vercel is well-suited for production applications, but that prices can apparently vary a lot based on usage

Exercises

1. Installing Next.js and Getting Started

  • Create a new app using npx create-next-app@latest --javascript, accepting defaults

  • When in doubt about the option prompts, refer to the installation guide

  • Explore the folder structure created and research elements you don't understand

  • Run the app using npm run dev

2. Create a Page That Renders the NASA Astronomy Picture of the Day (With Caption) using Server Side Rendering

  • Use the NASA API to fetch the Astronomy Picture of the Day data

  • Implement data fetching to fetch the data during the render

  • Render the fetched image and caption on the page

3. Dynamic Rendering With useEffect

Create a component that fetches NASA Mars Rover Photos from an API (with caption)

Use useEffect to Fetch Data on Component Mount

  • Fetch the data when the component mounts

  • Handle component unmount and dependency updates

Render Fetched Data in the Component

  • Display the fetched photos and captions in the component

4. Routing and Navigation Exercise

Create a Blog Website With Dynamic Routes to Different Blog Posts

  • Create a route /blogs that displays blogs

  • Create a dynamic route for a blog post that displays the title from the route. For example, /blogs/my-new-post should dynamically display "My New Post".

  • Hint: Check out the documentation for useParams.

Create a Page That Displays a NASA EPIC Image on a Different Date Depending on a Query String Parameter Received

  • Use the NASA API to fetch EPIC images

  • Access the query string parameter using useSearchParams

  • Fetch and display the EPIC image for the specified date

5. Client vs. Server Exercise

  • Create a component that renders 10 articles from a JSON array

  • You may use Generative AI to create only these articles, or use example text (search for "Lorem Ipsum generator")

  • Create a page that renders the 10 articles on the server

  • Create a page that renders the 10 articles on the client

  • Use your browser's performance panel to measure the performance of both versions

  • Document the two performance results and potential differences

Docs

6. Server Functions (or Server Actions) & API Routes Exercise

Server Functions (or Server Actions)

  • Create a server action that console.logs the current time when it is triggered

  • Create a page with a button that triggers the server action

  • Observe the Next.js console (not your browser console) after you've clicked the button

  • Does it show the time?

  • Refer to the docs when in doubt

Trying out API Routes

  • Create a Hello World API route at /api/hello that returns the following JSON

[
  {
    "type": "cat",
    "message": "purr"
  },
  {
    "type": "computer",
    "message": "Hello World"
  }
]

Last updated