1. unstable_revalidatePath —— 程序化触发页面重建
Next.js 支持增量静态生成（ISR），使得你可以对某些页面进行缓存并定期重新生成。但是有时候，你可能需要手动或基于业务逻辑触发某些页面的重新生成，而不只是依赖 ISR 的时间间隔。这时，unstable_revalidatePath 是一个非常有用的 API。
用法：
import { unstable_revalidatePath } from 'next/dist/server/api-utils';
export default async function handler(req, res) {
const path = req.query.path;
// 触发指定路径的重新生成
await unstable_revalidatePath(path);
res.status(200).json({ message: `Path ${path} has been revalidated!` });
}
通过这个 API，你可以在某个事件发生后（例如数据库更新）自动重新生成对应的静态页面，而无需等到 ISR 定时器到期。
2. getInitialProps —— 客户端和服务端共用逻辑
虽然 getStaticProps 和 getServerSideProps 是现代 Next.js 的推荐数据获取方式，但 getInitialProps 依然是一个有效的工具，特别是在需要让页面在客户端和服务端共享初始化逻辑的场景下非常有用。
用法：
function MyComponent({ userAgent }) {
return <div>当前的 User Agent: {userAgent}</div>;
}
MyComponent.getInitialProps = async (ctx) => {
const userAgent = ctx.req ? ctx.req.headers['user-agent'] : navigator.userAgent;
return { userAgent };
};
export default MyComponent;
getInitialProps 允许在服务端和客户端均执行相同的逻辑，特别适合需要跨平台兼容的项目或需要共享状态的复杂应用场景。
3. next.config.js 的 redirects 配置
当你想要设置 URL 重定向时，Next.js 提供了一种简单的方式来定义静态或动态的重定向，而不需要使用自定义的服务器配置。这在构建多语言网站或处理旧 URL 时特别有用。
用法：
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/old-url',
destination: '/new-url',
permanent: true, // 301 重定向
},
{
source: '/legacy-path/:id',
destination: '/new-path/:id',
permanent: false, // 302 重定向
},
];
},
};
通过这种方式，你可以在构建时定义重定向规则，自动处理旧路径的转发，提升用户体验。
4. useRouter 的 isFallback —— 检测增量静态生成页面状态
在增量静态生成过程中，当某个页面尚未生成时，Next.js 会展示一个占位页面。这时你可以通过 isFallback 来检测页面是否处于 ISR 的占位状态，并根据情况显示加载状态或自定义内容。
用法：
import { useRouter } from 'next/router';
function MyFallbackComponent() {
const router = useRouter();
if (router.isFallback) {
return <div>正在加载页面，请稍候...</div>;
}
return <div>页面内容已加载！</div>;
}
export default MyFallbackComponent;
通过 isFallback，你可以为尚未生成的页面提供友好的加载提示，优化用户体验。
5. next.config.js 的 headers 配置 —— 自定义 HTTP Headers
为了增强安全性或性能，开发者通常需要为某些路径设置自定义 HTTP 头。Next.js 允许在 next.config.js 中定义静态资源或页面的自定义头信息。
用法：
// next.config.js
module.exports = {
async headers() {
return [
{
source: '/:path*',
headers: [
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'X-Frame-Options', value: 'DENY' },
],
},
];
},
};
通过这种方式，你可以轻松配置内容安全策略（CSP）、防止点击劫持等，提升应用的安全性。
6. next/dynamic 的 ssr: false 属性 —— 禁用服务端渲染
在某些场景下，你可能不希望组件在服务端渲染，特别是当组件依赖于仅存在于客户端的库时，比如浏览器 API 或者涉及重度动画的库。这时，你可以使用 next/dynamic 并禁用服务端渲染。
用法：
import dynamic from 'next/dynamic';
const NoSSRComponent = dynamic(() => import('../components/MyClientOnlyComponent'), {
ssr: false,
});
function MyPage() {
return (
<div>
<h1>这是一个客户端渲染的组件：</h1>
<NoSSRComponent />
</div>
);
}
export default MyPage;
通过 ssr: false，这个组件只会在客户端渲染，有助于处理依赖客户端特性的组件。
7. Image 组件的 priority 属性 —— 优先加载关键图片
next/image 默认会根据视口和滚动行为延迟加载图片，以提升性能。但在某些情况下，你可能希望某些关键图片（比如首页的横幅图）立即加载而不是懒加载。这时可以使用 priority 属性。
用法：
import Image from 'next/image';
function HomePage() {
return (
<div>
<Image
src="/banner.jpg"
alt="首页横幅"
width={1200}
height={400}
priority={true} // 优先加载这张图片
/>
</div>
);
}
export default HomePage;
使用 priority 可以确保页面加载时图片优先显示，提升页面的视觉完整性。
