第六章(Next.js 面试真题)

一、Next.js 基础真题

1. Next.js 是什么？有什么特点？

参考答案：

Next.js 是 React 全栈框架，支持 SSR、SSG、ISR 等渲染模式。

特点：

• 服务端渲染 (SSR)：提升首屏加载速度和 SEO
• 静态站点生成 (SSG)：构建时预渲染静态页面
• 增量静态再生成 (ISR)：后台重新生成静态页面
• 文件系统路由：基于文件结构的路由系统
• API Routes：无需单独后端服务
• 自动代码分割：自动路由分割

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*'
            }
        ];
    }
};

部署平台：

• Vercel（官方推荐）
• 容器化（Docker）
• Node.js 服务器

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 特性？

参考答案：

• 布局：共享 UI 通过 layout.tsx
• 路由：基于文件系统
• 渲染：默认 Server Components
• 数据获取：async/await 直接获取

// 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 优化是高频考点。