Nextjs学习笔记

wx_lidysun2026-01-13 3:10

环境

json 复制代码

"dependencies": {
	"next": "^16.1.1",
	"react": "^19.2.3",
	"react-dom": "^19.2.3"
}

基于文件夹目录、自动生成路由规则

文件夹 = 路由路径（静态 / 动态路由均由文件夹定义）；
特殊文件 = 路由功能（page.js 是路由入口，layout.js 是布局等）；
特殊命名规则：动态路由用 $xxx$ ，路由分组用 (group)，均不影响 / 改变最终 URL。

text 复制代码

app/                          # 根目录（固定命名）
├── page.js                   # 对应 URL：/（网站首页）
├── layout.js                 # 全局布局（作用于所有路由）
├── (marketing)/              # 路由分组（URL 中省略）
│   ├── page.js               # 对应 URL：/（与根 page.js 冲突时按字母优先级）
│   ├── about/                # 对应 URL 片段：/about
│   │   ├── page.js           # 对应 URL：/about
│   │   └── layout.js         # about 路由的局部布局
│   └── contact/
│       └── page.js           # 对应 URL：/contact
├── blog/                     # 对应 URL 片段：/blog
│   ├── [postId]/             # 动态路由（单参数）
│   │   ├── page.js           # 对应 URL：/blog/123（postId=123）
│   │   └── layout.js         # 该动态路由的局部布局
│   └── [[...folder]]/        # 可选通配符路由（空/多参数）
│       └── page.js           # 对应 URL：/blog 或 /blog/a/b/c
└── shop/
    └── [...folder]/          # 必选通配符路由（多参数）
        └── page.js           # 对应 URL：/shop/a 或 /shop/a/b

路由参数获取 useParams

javascript 复制代码

// url 如 http://localhost:3000/lidysun

// app/(web)/[slug]/page.js
"use client";
import { useParams } from "next/navigation";
export default function Page() {
  const params = useParams();
  console.log(params); // {"slug": "lidysun"}
  const { slug } = params;
  return <div> Welcome: {JSON.stringify(slug)}</div>;
}

URL 参数获取 useSearchParams

javascript 复制代码

// url如  http://localhost:3000/?name=lidysun&age=35
"use client";
import { useSearchParams } from "next/navigation";

export default function Page() {
  const searchParams = useSearchParams();
  const name= searchParams.get("name");
	const age= searchParams.get("age");
  console.log(name,age);
  return (
    <>
      <h2>Hello Web</h2>
      <Link href="/hello">{name}</Link>
    </>
  );
}