[Next.js 學習筆記] 初探 Next.js 與 Routing

本章節重點

這篇文章主要 focus 在 Next.js 所提供的 routing 方法，主要 focus 在 Next.js 提供的這七個功能:

1. 基本 Routing -> 檔案結構
2. Nested Routes -> 新檔案夾與 index.js
3. Dynamic Routes -> [productId].js
4. Catch all Routed -> [...params].js，用 useRoutes 取得參數
5. Link Components -> navigate through all the pages in application
6. useRouter hook 的 router.push 可以用來當作 redirect 使用
7. Customed 404 page -> 404.js

Routing

Next.js 的 Routing 是其中一個很方便的功能，這邊紀錄一下各種 routing 方式:

routing with pages

只要在專案中 page 的資料夾底下新增檔案就會直接新增新的 route 了:

|_page
     |index.js //localhost:3000
     |about.js //loclahost:3000/about

nested routing

|_page
     |_index.js //localhost:3000
     |_about.js //loclahost:3000/about
     |_blog
          |_index.js //localhost:3000/blog
          |_first.js //localhost:3000/blog/first
          |_second.js //localhost:3000/blog/second

dynamic routing

使用方法: 用 [檔名].js 這個 convention 建立檔案

|_page
     |_index.js //localhost:3000
     |_about.js //loclahost:3000/about
     |_product
          |_index.js //localhost:3000/blog
          |_[productId].js //localhost:3000/blog/1(or 2 or 3 or any string)

拿取 query string:

import {useRouter} from "next/router";//用這個 hook 來做到

export default function ProductDetail(){
    const router = useRouter();
    const productId = router.query.productId //檔名的重要性
    return(
        <div>
            <h1>productDetail{productId}</h1>
        </div>
    )
}

nested dynamic routing

|_page
     |_index.js //localhost:3000
     |_about.js //loclahost:3000/about
     |_product
          |_index.js //localhost:3000/blog
          |_[productId]
                      |_index.js //localhost:3000/product/(any string)
                      |_review
                              |_[reviewId].js // localhost:3000/product/(any string)/review/(any string)

Catch all Routes

檔案結構以及命名方式:
目前的檔名只能 access localhost:3000/docs/(anything)，卻不能 access localhost:3000/docs 解決方式是把檔名改成: [[...params]].js。

|_page
     |_index.js //localhost:3000
     |_about.js //loclahost:3000/about
     |_docs
          |_[...params].js //localhost:3000/docs/(anything you want)

[...params].js 內部:

import { useRouter } from "next/router"

export default function Doc(){
    const router = useRouter();
    const {params=[]} = router.query;
    // docs 後面可以放超多參數 全不可以在這拿到(回傳一個 array)
    console.log(params)

    return(
        <div>
            <h1>doc page</h1>
        </div>
    )
}

Link Component

Link Component 是用於 client side application 內部之間的 navigation，假如要連結到外部網站的話使用 <a></a> 就好了。

import Link from "next/link"

function Home({id=100}){
    return(
        <div>
            <h1>Home Page</h1>
            <Link href="/about">
                <a>about page</a>
            </Link>
            <Link href={`/product/${id}`}>
                <a>product</a>
            </Link>
        </div>
    )
}

export default Home

navigating programmatically

import Link from "next/link"
import {useRouter} from "next/router";

function Home({id=100}){
    const router = useRouter();
    function handler(){
        router.push("/blog");
    }

    return(
        <div>
            <h1>Home Page</h1>
            <button onClick={handler}></button>
        </div>
    )
}

export default Home