官网：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')
}
}
