Max Next – Section 3 – Pages and File-based Routing


Courses

Updated Jul 15th, 2021

Table of Contents

Chapter Details

Chapter 50 – Module Introduction

Routing is one of the main thing that changes versus vanilla react. Makes is better. From code-based to file-based routing.

Chapter 51 – Our Starting Setup

Has a cleaned-up starter project

Chapter 52 – What is “File-Based Routing?” And Why is it Helpful

In traditional react project use “react-router” from “react.” No JSX code at all when defining routes. Instead we create React component files and let NextJS infer the routes from the folder structure. Use special “pages” folder. We have “index.js” file and “[id].js” file inside of a “/pages/products” folder.

Chapter 53 – Adding a First Page

// In pages/index.js

function HomePage() {
  return (
    <div>
      <h1>The Home Page</h1>
    </div>
  )
}

export default HomePage

Note that you always must export as default

Chapter 54 – Adding a Named / Static Route

Add an “about.js” file in the “pages” folder

Chapter 55 – Working with Nested Paths

Can add folders to pages folder, “pages/portfolio/index.js” is an equivalent to the previous chapter. Needed though, if you want paths with multiple segments.

Chapter 56 – Adding Dynamic Paths & Routes

Square brackets is a key Next.js feature [id].js where id can be any term you want.

Chapter 57 – Extracting Dynamic Paths & Routes

Get access to concrete value with useRouter hook defined by the Next,js team.

import {useRouter} from 'next/router'

function PortfolioProjectPage () {
  const router = useRouter()

  console.log(router.pathname())
  console.log(router.query())

  return (
  <div><h1>Hello</h1></div>
  )
}

export default PortfolioProjectPage

router.query() can be used to send a request to some backend server to fetch the piece of data with an id of router.query.projectid

Chapter 58 – Building Nested Dynamic Routes

Two variations of this concept. Can have nested dynamic paths. Could have “pages/clients/index” and “pages/clients/[id]/index” and then pages/clients/[id]/[clientprojectid].js want a summary page for each client that then has all of the projects for that client. Individual project page for a selected client.

Chapter 59 – Adding Catch-All Routes

The second variation mentioned in the previous chapter. Can define catch all routes. Load all blog posts for a specific month for example. Similar to spread operator […slug].js where slug can be any name of you choosing. Number of segments are dynamic.

Want to navigate programmatically through links.

import Link from 'next/link'
// note Link is default export so don't need curly brackets

// Works but this send a new http request and you lose app-wide state
// Not the idea of a react app
<a href="/portfolio">Portfolio</a>

// Doesn't reload page or lose state, auto prefetches data
<Link href="/portfolio">Portfolio</Link>

// use replace prop so you can't go back
<Link replace href="/portfolio">Portfolio</Link>

Chapter 61 -Navigating to Dynamic Routes

<h1>The Clients Page</h1>
<ul>
  {clients.map(client => <li key={client.id}
    <Link href={`/clients/${client.id}`}>{client.name}</Link>
  </li>)}
</ul>

Chapter 62 – A Different Way of Setting Links

For longer paths this can be cumbersome so we get an alternative. We can pass an object as value for the href. This is an optional approach for using the Link component.

<Link href={{
  pathname: 'clients/[id]'
  query: {id: client.id}
}}>${client.name}</Link>

Chapter 63 – Navigating Programmatically

Use “onClick={}” prop on a button element that points to a “loadProjectHandler” function defined above the return. Navigate with router.push() or router.replace() where we cannot go back.

router.push({
  pathname: 'clients/[id]/[clientprojectid]'
  query: {id: 'max', clientprojectid: 'projecta'}
})

Chapter 64 – Adding a Custom 404 Page

Show your own 404 page with a “404.js” file in the same directory as the “_app.js” and “index.js” files.

Chapter 65 – Module Summary

Chapter 66 – Module Resources