一、Next.js 基础真题
1. Next.js 是什么？有什么特点？
参考答案：
Next.js 是 React 全栈框架，支持 SSR、SSG、ISR 等渲染模式。
特点：
- 服务端渲染 (SSR)：提升首屏加载速度和 SEO
2. Next.js 13+ 的 App Router 是什么？
参考答案：
App Router 是 Next.js 13+ 的新路由系统，使用 React Server Components。
// app/page.tsx - 首页
exportdefaultfunctionHomePage() {
return<h1>首页</h1>;
}
// app/about/page.tsx - 关于页
exportdefaultfunctionAboutPage() {
return<h1>关于</h1>;
}
// app/blog/[slug]/page.tsx - 动态路由
exportdefaultfunctionBlogPost({ params }) {
return<h1>博客: {params.slug}</h1>;
}
3. SSR 和 SSG 的区别？
参考答案：
// SSR - 服务端渲染
exportconst dynamic = 'force-dynamic';
exportdefaultasyncfunctionPage() {
const data = awaitfetch('https://api.example.com/data', {
cache: 'no-store'
});
return<div>{data.name}</div>;
}
// SSG - 静态生成
exportdefaultasyncfunctionPage() {
const data = awaitfetch('https://api.example.com/data');
return<div>{data.name}</div>;
}
// ISR - 增量静态再生成
exportdefaultasyncfunctionPage() {
const data = awaitfetch('https://api.example.com/data', {
next: { revalidate: 60 }
});
return<div>{data.name}</div>;
}
4. Next.js 如何实现 SEO 优化？
参考答案：
// app/layout.tsx
exportconst metadata = {
title: {
default: '网站标题',
template: '%s | 网站名称'
},
description: '网站描述',
keywords: ['前端', 'React', 'Next.js'],
openGraph: {
title: 'OG标题',
description: 'OG描述',
images: ['/og-image.jpg']
}
};
// app/products/[id]/page.tsx
exportasyncfunctiongenerateMetadata({ params }) {
const product = awaitgetProduct(params.id);
return {
title: product.name,
description: product.description
};
}
5. Next.js 的数据获取方式有哪些？
参考答案：
// 服务端组件直接获取
asyncfunctiongetData() {
const res = awaitfetch('https://api.example.com/data');
return res.json();
}
// useFetch (客户端)
const { data } = awaituseFetch('/api/data');
// getStaticProps (Pages Router)
exportasyncfunctiongetStaticProps() {
const data = awaitfetchData();
return { props: { data } };
}
// getServerSideProps (Pages Router)
exportasyncfunctiongetServerSideProps() {
const data = awaitfetchData();
return { props: { data } };
}
二、Next.js 进阶真题
6. Next.js 如何实现鉴权？
参考答案：
// middleware.ts
import { NextResponse } from'next/server';
exportfunctionmiddleware(request) {
const token = request.cookies.get('token');
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
returnNextResponse.redirect(newURL('/login', request.url));
}
returnNextResponse.next();
}
// API 路由
exportasyncfunctionGET(request) {
const token = request.cookies.get('token');
if (!token) {
returnResponse.json({ error: '未登录' }, { status: 401 });
}
returnResponse.json({ data: 'secret' });
}
7. Next.js 的性能优化？
参考答案：
// 图片优化
importImagefrom'next/image';
<Image
src="/hero.jpg"
alt="Hero"
width={800}
height={600}
priority
placeholder="blur"
/>
// 字体优化
import { Inter } from'next/font/google';
const inter = Inter({ subsets: ['latin'] });
// 脚本优化
importScriptfrom'next/script';
<Script
src="/analytics.js"
strategy="lazyOnload"
/>
// 路由预加载
<Linkhref="/about"prefetch={true}>关于</Link>
8. Next.js API 路由怎么写？
参考答案：
// app/api/user/route.ts
import { NextResponse } from'next/server';
exportasyncfunctionGET() {
const users = awaitfetchUsers();
returnNextResponse.json(users);
}
exportasyncfunctionPOST(request) {
const body = await request.json();
const user = awaitcreateUser(body);
returnNextResponse.json(user, { status: 201 });
}
9. Next.js 13+ 的 Server Components 和 Client Components？
参考答案：
// Server Component (默认)
// app/page.tsx
asyncfunctiongetData() {
const res = awaitfetch('https://api.example.com/data');
return res.json();
}
exportdefaultasyncfunctionPage() {
const data = awaitgetData();
return<div>{data.name}</div>;
}
// Client Component
// app/counter.tsx
'use client';
import { useState } from'react';
exportdefaultfunctionCounter() {
const [count, setCount] = useState(0);
return<buttononClick={() => setCount(c => c + 1)}>{count}</button>;
}
10. Next.js 的部署方式？
参考答案：
// next.config.js
module.exports = {
reactStrictMode: true,
images: {
domains: ['example.com'],
formats: ['image/avif', 'image/webp']
},
asyncrewrites() {
return [
{
source: '/api/proxy/:path*',
destination: 'https://api.example.com/:path*'
}
];
}
};
部署平台：
11. Next.js 缓存机制？
参考答案：
// 请求缓存
fetch('https://api.example.com/data', {
cache: 'force-cache'// 默认，静态缓存
});
// 动态数据
fetch('https://api.example.com/data', {
cache: 'no-store'// 每次请求都获取最新
});
// 增量静态再生成
fetch('https://api.example.com/data', {
next: { revalidate: 60 } // 60秒重新验证
});
12. Next.js 中间件？
参考答案：
// middleware.ts
import { NextResponse } from'next/server';
import type { NextRequest } from'next/server';
exportfunctionmiddleware(request: NextRequest) {
// 验证 token
const token = request.cookies.get('token');
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
returnNextResponse.redirect(newURL('/login', request.url));
}
returnNextResponse.next();
}
exportconst config = {
matcher: '/dashboard/:path*'
};
13. Next.js API Routes？
参考答案：
// app/api/users/route.ts
import { NextResponse } from'next/server';
exportasyncfunctionGET() {
const users = awaitfetchUsers();
returnNextResponse.json(users);
}
exportasyncfunctionPOST(request: Request) {
const body = await request.json();
const user = awaitcreateUser(body);
returnNextResponse.json(user, { status: 201 });
}
14. Next.js 图片优化？
参考答案：
importImagefrom'next/image';
exportdefaultfunctionPage() {
return (
<Image
src="/hero.jpg"
alt="Hero"
width={800}
height={600}
priority // 优先加载
placeholder="blur"
blurDataURL="data:image/jpeg;base64,..."
/>
);
}
15. Next.js 静态导出？
参考答案：
// next.config.js
module.exports = {
output: 'export',
images: {
unoptimized: true
}
};
生成纯静态 HTML，适合 CDN 部署。
16. Next.js 字体优化？
参考答案：
// app/layout.tsx
import { Inter } from'next/font/google';
const inter = Inter({ subsets: ['latin'] });
exportdefaultfunctionRootLayout({ children }) {
return (
<htmllang="zh"className={inter.className}>
<body>{children}</body>
</html>
);
}
17. Next.js 国际化？
参考答案：
// middleware.ts
import { match } from'@formatjs/intl-localematcher';
importNegotiatorfrom'negotiator';
const locales = ['en', 'zh'];
const defaultLocale = 'zh';
exportfunctionmiddleware(request) {
const pathname = request.nextUrl.pathname;
const pathnameIsMissingLocale = locales.every(
locale => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
);
if (pathnameIsMissingLocale) {
const locale = getLocale(request);
returnNextResponse.redirect(
newURL(`/${locale}${pathname}`, request.url)
);
}
}
18. Next.js App Router 特性？
参考答案：
// app/page.tsx
exportdefaultasyncfunctionPage() {
const data = awaitgetData();
return<div>{data.title}</div>;
}
19. Next.js 流式渲染？
参考答案：
// app/page.tsx
import { Suspense } from'react';
exportdefaultfunctionPage() {
return (
<div>
<h1>首页</h1>
<Suspensefallback={<Loading />}>
<Reviews />
</Suspense>
</div>
);
}
asyncfunctionReviews() {
const reviews = awaitgetReviews();
return reviews.map(r =><divkey={r.id}>{r.content}</div>);
}
20. Next.js 环境变量？
参考答案：
# .env.local - 本地
NEXT_PUBLIC_API_URL=https://api.example.com
API_SECRET=secret
# .env.production - 生产
NEXT_PUBLIC_API_URL=https://prod.example.com
// 使用
console.log(process.env.NEXT_PUBLIC_API_URL);
console.log(process.env.API_SECRET); // 服务端可用
📌 面试重点：App Router、SSR vs SSG、数据获取、SEO 优化是高频考点。
