Next.js 项目搭建笔记
Next.js 项目搭建笔记
安装
pnpm create next-app@latest my-app --yes
cd my-app
pnpm devCli 方式安装
创建新的 Next.js 应用最快捷的方法是使用 `npm run dev` create-next-app，它会自动为您完成所有设置。要创建项目，请运行：
npx create-next-app@latest
路由相关
Next.js 采用约定式路由，也就是根据文件系统作为路由；当然貌似也有配置式路由，但是好像对于SEO来说比较麻烦
在Next.js 13+以后，都是把路由文件放在app目录中、之前好像是放在pages里面
然后目录下的page.tsx|jsx|js作为路由的文件入口、也就是说必须是有page.tsx|jsx|js的目录才会作为路由
app/layout.tsx 文件会作为根布局文件，且是必需的，并且要html、body标签
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}可以通过在文件夹名称前加下划线来创建私有文件夹：_folderName
还可以用括号分组路由： 比如app/(user)/user/page.tsx 这个目录路由是/user 、app/(post)/post/page.tsx -> /post
有了分组路由：我们就可以使用多个layout.tsx 来做不同的布局了，比如全局布局、个人中心布局等
app/page.tsx 就是 根路由
app/user/[slug]/page.tsx 就是二级路由、 [slug]也是动态路由
获取params
export default async function BlogPostPage({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
const post = await getPost(slug)
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
)
}在服务器组件页面中，您可以使用 prop 访问搜索参数searchParams
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const filters = (await searchParams).filters
}客户端组件可以使用钩子读取搜索参数useSearchParams
路由跳转
import Link from 'next/link'
export default async function Post({ post }) {
const posts = await getPosts()
return (
<ul>
{posts.map((post) => (
<li key={post.slug}>
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
</li>
))}
</ul>
)
}
链接和导航
在 Next.js 中，路由默认在服务器端渲染。这意味着客户端通常需要等待服务器响应才能显示新的路由。Next.js 内置了预取、流式传输和客户端过渡等功能，确保导航快速响应。
服务器端渲染的缺点在于，客户端必须等待服务器响应才能显示新路由
预取（预加载）
预取是指在用户导航到某个路由之前，在后台加载该路由的过程。这使得应用程序中的路由切换感觉非常流畅，因为当用户点击链接时，渲染下一个路由所需的数据已经在客户端可用了。
由预取的程度取决于它是静态的还是动态的：
-
- 静态路由：预先获取完整路由。
- 动态路由loading.tsx：跳过预取，或者如果存在则部分预取路由。
通过跳过或部分预取动态路由，Next.js 可以避免服务器对用户可能永远不会访问的路由进行不必要的操作。然而，在导航之前等待服务器响应可能会让用户误以为应用程序没有响应。
流媒体
流式传输允许服务器在动态路由的某些部分准备就绪后立即将其发送给客户端，而无需等待整个路由渲染完成。这意味着即使页面的某些部分仍在加载，用户也能更快地看到内容。
对于动态路由，这意味着它们可以部分预取。也就是说，可以提前请求共享布局和加载框架
要使用流式传输，在目录下创建一个loading.tsx
export default function Loading() {
// Add fallback UI that will be shown while the route is loading.
return <LoadingSkeleton />
}禁用预取
<Link prefetch={false} href="/blog">
Blog
</Link>通过在组件上设置prefetch prop 来选择不启用预取。这有助于在渲染大量链接列表（例如无限滚动表格）时避免不必要的资源消耗
应该使用 prefetch={true}（默认）的情况：
主导航链接（用户频繁点击）
关键用户路径（如：首页 → 产品 → 详情）
当前页面的主要操作（如："立即购买"按钮）
视口内的链接（用户可能点击）
应该使用 prefetch={false} 的情况：
页脚/法律页面链接（很少访问）
长列表中的链接（避免过多请求）
移动端慢网络（节省流量）
动态参数链接（不确定具体页面）
用户生成内容链接（可能频繁变化）
下一篇:没有了