Next

Next.js官方文档

小满zs的Next.js教程文档

Next.js Project By GitHub

项目初始化

npx create-next-app@latest

路由

layout && template

• layout(布局) 布局是多个页面共享UI，例如导航栏、侧边栏、底部等。
• template(模板) 基本功能跟布局一样，只是不会保存状态
• layout --> template --> page

loading 加载

• 触发异步会自动跳转到loading组件 异步结束正常返回页面

error 错误

not-found(404)

Next默认会生成一个404页面，但我们可能自定义404页面

Link 导航

• 直接跳转
• 通过query传参
• 预获取页面，生产环境下，访问当前页面会自动预获取页面/about/me
• 保持滚动位置
• 替换当前页面

import Link from 'next/link';

export default async function Home() {
  return <div className="border border-black rounded-lg p-4">
    <div className="flex flex-col">
      <Link href="/about/me">跳转到me</Link>
      <Link href={{pathname: '/about/me', query: {name: '张三'}}}>跳转并传参</Link>
      <Link href="/about/me" prefetch={true}>预获取page页面</Link>
      <Link href="/about" scroll={true}>保持滚动位置</Link>
      <Link href="/about" replace={true}>替换当前页面</Link>
    </div>
  </div>;
}

useRouter Hook

redirect、permanentRedirect 重定向

permanentRedirect是永久重定向，而redirect是临时重定向

'use client';
import {redirect} from 'next/navigation';

export default function Me() {
  return <div>
    <button onClick={() => redirect('/login')}>重定向</button>
  </div>;
}

动态路由

匹配规则

• [id].tsx 匹配 /about/1
• [...id].tsx 匹配 /about/1/2/3 （多层级）
• [[id]].tsx 匹配 /about/[1] （可选）

'use client';
import {useParams} from 'next/navigation';

export default function DynamicRoute() {
  const {id} = useParams();
  return <div>动态路由获取 {id}</div>;
}

路由处理API

定义GET和POST请求处理逻辑，地址为src/app/api/user/route.ts

import {NextRequest, NextResponse} from 'next/server';

export async function GET(request: NextRequest) {
  const query = request.nextUrl.searchParams;
  const id = query.get('id');
  return NextResponse.json({message: `Get request successful! id = ${id}`});
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  // const body = await request.formData();
  // const body = await request.text();
  // const body = await request.blob();
  // const body = await request.arrayBuffer();
  return NextResponse.json({message: `Post request successful! id = ${body}`});
}

其中如果是动态路由传参，则地址为src/app/api/[id]/route.ts与动态路由匹配规则一致

import {NextRequest, NextResponse} from 'next/server';

export async function GET(request: NextRequest, {params}: { params: Promise<{ id: string }> }) {
  const {id} = await params;
  return NextResponse.json({message: `动态路由API Get request successful! id = ${id}`});
}