next.js 学习笔记(routing)

这篇Blog主要是记录我学习next.js的过程，以及一些重要的知识点。

Routing(路由，以下内容都是app router)

Defining Routes(定义路由)

Next.js的路由是基于文件系统的, 只要在目录下有个page.(js|jsx|tsx)文件，那么这个目录名就会成为一个可访问的路由地址。

Pages and Layouts(页面和布局)

Pages

page.(js|jsx|tsx)文件可以让路由变成public access。默认情况下page.(js|jsx|tsx)的组件都是server components

Layouts

Layout.(js|jsx|tsx)文件可以做到让布局在多个路由中共享。Layout组件会接受一个Children属性，这个属性就是当前路由的内容。

Root Layout(Required)

在 app目录下必须要有一个layout.(js|jsx|tsx)文件，这个文件是整个app的根布局。同时在该layout文件中，需要有html 和 body标签。
其他的嵌套layout文件不允许有html 和 body标签。
layout默认是server components。没有办法在 parent layout 和 child layout 之间传递数据。

Templates

Template.(js|jsx|tsx) 文件和 Layout 文件的区别是在路由导航的时候， Template 实例会重新创建，而 layout 不会

Metadata

Metadata可以通过在page.js或者layout.js导出metadata对象来定义，或者通过generateMetadata函数来动态生成。

TSX

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js',
}

// or Dynamic metadata
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}


export default function Page() {
  return '...'
}

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js',
}

// or Dynamic metadata
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}


export default function Page() {
  return '...'
}

Link组件

这是主要并且推荐的一种路由跳转方式，提供了prefetching的功能

TSX

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

如果想要知道当前的路由可以通过usePathname hook来获取

TSX

'use client'
import { usePathname } from 'next/navigation'

export function Page() {
  const pathname = usePathname()
  return <p>Current path: {pathname}</p>
}

'use client'
import { usePathname } from 'next/navigation'

export function Page() {
  const pathname = usePathname()
  return <p>Current path: {pathname}</p>
}

useRouter() hook

useRouter hook 允许通过编程的方式在Client Components进行路由跳转

TSX

'use client'

import { useRouter } from 'next/navigation'

export deafult function Page() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/dashboard')}>Go to dashboard</button>
  )
}

'use client'

import { useRouter } from 'next/navigation'

export deafult function Page() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/dashboard')}>Go to dashboard</button>
  )
}

redirect function

在 server components中可以通过redirect函数来进行路由跳转。不能在事件处理函数中使用redirect函数。

Error Handling

Using Error Boundaries

通过添加error.tsx文件可以处理子组件的错误, 当子组件发生错误的时候，error.tsx会被渲染。

TSX

'use client' // Error boundaries must be Client Components

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

'use client' // Error boundaries must be Client Components

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}