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.
Chapter 60 – Navigation with the Link Component
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