Next.js 初学者需要掌握哪些核心知识点？
- 内容介绍
- 文章标签
- 相关问答
在开始使用 Next.js 时最常见的困惑往往来自于对组件执行环境、数据获取方式还有路由处理的误解。不过，下面按主要知识点拆解，方便你定位并解决这些痛点。
一、服务端组件 vs 客户端组件
Next.js 的 App Router 采用“文件即路由”，同时把 app/ 下的所有 React 组件默认视为服务端组件。如果不熟悉两者区别，后续就会频繁遇到“useState is not a function”之类的错误。
服务端组件
-
可以直接使用
async/await在服务器上跑代码。 - 可直接访问数据库或外部 API，数据不会泄露给浏览器。老实说，
- 不支持 浏览器特有 Hook还有任何 DOM 操作。按理说，
export default async function Home {
const res = await fetch;const json = await res.json;return
{json.title}
}
客户端组件
-
顶部需声明
"use client"。 - 可以使用 React hooks、事件绑定和任何浏览器 API。
- 不支持直接 async/await 请求；若需要请求请用 useEffect 或 fetch 在客户端执行。怎么说呢，
"use client";import { useState } from "react";按理说，export default function SearchBox {
const = useState;怎么说呢，return (
setValue} />
);}
项目实例示例
服务端组件： app/page.tsx、app/builds/page.tsx、app/champions//page.tsx 客户端组件： components/ChampionGrid.tsx、app/augments/page.tsx 等。
常用方法： 让父级保持为服务端组件负责获取数据，将数据作为 props 下发给子级客户端组件完成交互逻辑。
二、fetch 与 axios 的选择
推荐使用原生 fetch
No caching or revalidation support → performance hit.
// 使用 Next.js 原生 fetch
const data = await fetch('https://api.example.com'。{
next这方面，{ revalidate: 3600 } // 每小时重新生成
});const json = await data.json;return NextResponse.json;
axios 能用吗？有限制，说起来，
- 客户端组件中可用 axios；无缓存能力，但性能足够满足交互需求。
- 服务端组件中可用 axios。但失去 Next.js 的缓存机制，建议改用原生 fetch。
"use client";import axios from "axios";import { useEffect,useState } from "react";export default function MyComponent {
const = useState;useEffect => {
axios.get.n);},)，return
{JSON.stringify}
}
Troubleshooting 小贴士：fetch vs axios 混合使用时要注意缓存失效问题。始终将服务器渲染阶段的数据请求统一写在 Server Component 并开启 revalidate，以获得最佳性能与最新度平衡。
三、路由编程技巧
文件即路由概览：
app/
├── page.tsx → /
├── about/
│ └── page.tsx → /about
├── champions/
│ ├── page.tsx → /champions
│ └── /
│ └── page.tsx → /champions/:id
└── blog/
└── /
└── page.tsx → /blog/*any*
动态路由取参数：
interface Props {
至于params，Promise<{ id: string }>
}
export default async function ChampionPage {
const { id } = await params;// id 就是 URL 中的值，例如访问 /champions/Jinx 时为 "Jinx"
return
Champion ID: {id}
}
从编程式跳转来看。router.push
"use client";import { useRouter } from "next/navigation";export default function MyButton {
const router = useRouter;老实说，return (
);}
Link 调整预加载：
import Link from "next/link";
查看金克斯
四、实现路由守卫
No built‑in Vue‑style beforeEach guard,but several approaches exist.
| 方式 | 执行时机 | 适合场景 |
|---|---|---|
| middleware | 请求到达前。全局权限控制 | 性能最好，大多数情况 |
| 服务器端 redirect | 服务端渲染阶段。仅单页面 | 需要根据后端数据决定跳转 |
| 客户端 useEffect | 浏览器渲染后
| 简单场景，会有短暂闪烁 |
// middleware.ts import { NextResponse } from 'next/server';老实说，import type { NextRequest } from 'next/server';
export function middleware { const token = request.cookies.get?.value，?''，const isLoginPage = request.nextUrl.pathname === '/login';
if return NextResponse.redirect);if return NextResponse.redirect);
return NextResponse.next;}
export const config = { matcher :,};
ts // app/dashboard/page.tsx import { redirect } from 'next/navigation';import { getSession } from '@/lib/auth';
export default async function DashboardPage { const session = await getSession;if redirect，return
欢迎，{session.user.name}
}tsx // ProtectedClientPage.jsx "use client";说起来，import { useRouter } from 'next/navigation';import { useEffect } from 'react';
export default function ProtectedPage { const router = useRouter;
useEffect => { const token = localStorage.getItem;if router.push;},)，话说回来，
return
受保护的内容
}
推荐使用 middleware。一次配置即可全局生效，无需在每个页面重复检查。它既能保证安全，又能避免页面闪烁。💡 END
注：下文继续补充剩余章节内容，请自行阅读完整文章以获得完整信息。——如需明，请随时告诉我！怎么说呢，
在开始使用 Next.js 时最常见的困惑往往来自于对组件执行环境、数据获取方式还有路由处理的误解。不过，下面按主要知识点拆解，方便你定位并解决这些痛点。
一、服务端组件 vs 客户端组件
Next.js 的 App Router 采用“文件即路由”，同时把 app/ 下的所有 React 组件默认视为服务端组件。如果不熟悉两者区别，后续就会频繁遇到“useState is not a function”之类的错误。
服务端组件
-
可以直接使用
async/await在服务器上跑代码。 - 可直接访问数据库或外部 API，数据不会泄露给浏览器。老实说，
- 不支持 浏览器特有 Hook还有任何 DOM 操作。按理说，
export default async function Home {
const res = await fetch;const json = await res.json;return
{json.title}
}
客户端组件
-
顶部需声明
"use client"。 - 可以使用 React hooks、事件绑定和任何浏览器 API。
- 不支持直接 async/await 请求；若需要请求请用 useEffect 或 fetch 在客户端执行。怎么说呢，
"use client";import { useState } from "react";按理说，export default function SearchBox {
const = useState;怎么说呢，return (
setValue} />
);}
项目实例示例
服务端组件： app/page.tsx、app/builds/page.tsx、app/champions//page.tsx 客户端组件： components/ChampionGrid.tsx、app/augments/page.tsx 等。
常用方法： 让父级保持为服务端组件负责获取数据，将数据作为 props 下发给子级客户端组件完成交互逻辑。
二、fetch 与 axios 的选择
推荐使用原生 fetch
No caching or revalidation support → performance hit.
// 使用 Next.js 原生 fetch
const data = await fetch('https://api.example.com'。{
next这方面，{ revalidate: 3600 } // 每小时重新生成
});const json = await data.json;return NextResponse.json;
axios 能用吗？有限制，说起来，
- 客户端组件中可用 axios；无缓存能力，但性能足够满足交互需求。
- 服务端组件中可用 axios。但失去 Next.js 的缓存机制，建议改用原生 fetch。
"use client";import axios from "axios";import { useEffect,useState } from "react";export default function MyComponent {
const = useState;useEffect => {
axios.get.n);},)，return
{JSON.stringify}
}
Troubleshooting 小贴士：fetch vs axios 混合使用时要注意缓存失效问题。始终将服务器渲染阶段的数据请求统一写在 Server Component 并开启 revalidate，以获得最佳性能与最新度平衡。
三、路由编程技巧
文件即路由概览：
app/
├── page.tsx → /
├── about/
│ └── page.tsx → /about
├── champions/
│ ├── page.tsx → /champions
│ └── /
│ └── page.tsx → /champions/:id
└── blog/
└── /
└── page.tsx → /blog/*any*
动态路由取参数：
interface Props {
至于params，Promise<{ id: string }>
}
export default async function ChampionPage {
const { id } = await params;// id 就是 URL 中的值，例如访问 /champions/Jinx 时为 "Jinx"
return
Champion ID: {id}
}
从编程式跳转来看。router.push
"use client";import { useRouter } from "next/navigation";export default function MyButton {
const router = useRouter;老实说，return (
);}
Link 调整预加载：
import Link from "next/link";
查看金克斯
四、实现路由守卫
No built‑in Vue‑style beforeEach guard,but several approaches exist.
| 方式 | 执行时机 | 适合场景 |
|---|---|---|
| middleware | 请求到达前。全局权限控制 | 性能最好，大多数情况 |
| 服务器端 redirect | 服务端渲染阶段。仅单页面 | 需要根据后端数据决定跳转 |
| 客户端 useEffect | 浏览器渲染后
| 简单场景，会有短暂闪烁 |
// middleware.ts import { NextResponse } from 'next/server';老实说，import type { NextRequest } from 'next/server';
export function middleware { const token = request.cookies.get?.value，?''，const isLoginPage = request.nextUrl.pathname === '/login';
if return NextResponse.redirect);if return NextResponse.redirect);
return NextResponse.next;}
export const config = { matcher :,};
ts // app/dashboard/page.tsx import { redirect } from 'next/navigation';import { getSession } from '@/lib/auth';
export default async function DashboardPage { const session = await getSession;if redirect，return
欢迎，{session.user.name}
}tsx // ProtectedClientPage.jsx "use client";说起来，import { useRouter } from 'next/navigation';import { useEffect } from 'react';
export default function ProtectedPage { const router = useRouter;
useEffect => { const token = localStorage.getItem;if router.push;},)，话说回来，
return
受保护的内容
}
推荐使用 middleware。一次配置即可全局生效，无需在每个页面重复检查。它既能保证安全，又能避免页面闪烁。💡 END
注：下文继续补充剩余章节内容，请自行阅读完整文章以获得完整信息。——如需明，请随时告诉我！怎么说呢，