官网：https://nextjs.org/
学习视频：https://www.bilibili.com/video/BV1hX4y1C7js/?spm_id_from=333.788&vd_source=1474926af0bdabdf32b94092a578e8e6

What is nextjs and why would we use it

Because it is a fullstack react framework for building fullstack react apps, so it simplifies the process of building fullstack applications with React

Router

• Pages Router (before nextjs V13)

  
  
  Pages Router目录
  
  

  弊端，那就是 pages 目录的所有 js 文件都会被当成路由文件，这就导致比如组件不能写在 pages 目录下

• App Router
  功能更强、性能更好、代码组织更灵活, 没有 pages 这个目录
  page.js 文件是 Next.js 约定的，必须为这个名称，否则不识别，作用是为路由创建用户界面，即 UI
• 嵌套路由

• 动态路由
  [folderName]，如 [id]、[slug] 等，id ， slug将会作为 params 属性传递给 转跳的页面。
  目录结构：

  
  
  目录结构

点击按钮，页面转跳传参id

 const viewDetailClick = (id: number) => {
      console.log('123', id)
     router.push(`/movies/${id}`);
   };

页面接收参数id

import {useParams, useRouter} from 'next/navigation';
const {id} = useParams();

• Router Group
  文件夹使用 小括号包括，(folder)

  
  
  Router Group

链接与导航

• Link 组件

import Link from 'next/link'  
 
export default function Page() {  
 return <Link href="/about">About</Link>  
}

• useRouter 钩子, client 组件

'use client'    
import { useRouter } from 'next/navigation'    
export default function Page() {  
  const router = useRouter()   
  return (  
    <button type="button" onClick={() => router.push('/about')}>  
      Dashboard  
    </button>  
  )  
}

• redirect 功能，server 组件

import { redirect } from 'next/navigation'  
  
async function fetchTeam(id: string) {  
  const res = await fetch('https://...')  
  if (!res.ok) return undefined  
  return res.json()  
}  
  
export default async function Profile({ params }: { params: { id: string } }) {  
  const team = await fetchTeam(params.id)  
  if (!team) {  
    redirect('/login')  
  }
  
}

Layout

参考：https://juejin.cn/post/7371641316114464804