在使用 Next.js 进行开发时，很多开发者通常只关注 Next.js 的核心功能，比如路由、数据获取（getServerSideProps、getStaticProps）、页面优化等。但是 Next.js 还提供了一些不太常用但非常强大的 API，帮助开发者更高效地构建应用。下面我们来介绍几个冷门但实用的 Next.js API 及其用法。
1. getServerSidePaths —— 动态路径的增量静态生成
通常情况下，getStaticPaths 用于为动态路由预生成静态页面。但对于大型应用，预生成所有可能路径的成本较高。这时，Next.js 提供了增量静态生成（Incremental Static Regeneration，简称 ISR），你可以结合 getServerSidePaths 来只在请求时生成页面。
用法：
export async function getServerSidePaths(context) {
const paths = await getDynamicPathsFromAPI(); // 从外部API获取动态路径
return {
paths, // 返回需要生成的路径
fallback: true, // 如果路径不存在，则启用增量生成
};
}
通过这种方式，只有用户访问特定页面时，Next.js 才会生成该页面，并将其静态缓存。
2. unstable_getStaticParams —— 动态参数优化
这个 API 是 getStaticPaths 的增强版，它允许你将参数设为动态获取，而不是一次性全部获取。当你需要在构建时获取大量路径时，它可以提高性能。
用法：
export async function unstable_getStaticParams() {
const params = await getSomeParams();
return params.map(param => ({
id: param.id,
category: param.category,
}));
}
它相比 getStaticPaths 更灵活，并且可以通过异步操作动态获取参数。
3. next/head 的 defaultTitle 和 titleTemplate
通常，开发者使用 next/head 来管理每个页面的标题和元数据，但 Next.js 提供了更方便的方式来设置默认的标题和标题模板，特别适合大型应用的全局 SEO 设置。
用法：
import Head from 'next/head';
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<titleTemplate>%s - My Awesome App</titleTemplate>
<defaultTitle>My Awesome App</defaultTitle>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
这样，你可以自动为每个页面添加相同的后缀，并设定一个默认的页面标题。
4. useRouter 的 beforePopState —— 自定义回退行为
useRouter 提供了很多开发者熟悉的功能，比如路由推送和替换，但其中的 beforePopState 通常不为人所知。这个 API 允许你在用户触发浏览器的回退操作时，拦截并自定义行为。
用法：
import { useRouter } from 'next/router';
import { useEffect } from 'react';
function MyComponent() {
const router = useRouter();
useEffect(() => {
router.beforePopState(({ url, as, options }) => {
// 例如，防止在特定情况下回退
if (as === '/some-protected-route') {
return false; // 阻止默认回退
}
return true;
});
}, []);
return <div>My Component</div>;
}
export default MyComponent;
这个 API 在处理复杂的导航逻辑时非常有用，比如在用户离开表单页面前确认是否保存更改。
5. next/image 的 onLoadingComplete 事件
next/image 是 Next.js 提供的图片优化组件，通常用于优化图片的加载性能。尽管其最常见的用法是设置图片的尺寸和格式，但 onLoadingComplete 事件允许你在图片加载完毕后执行一些额外操作，比如计算图片尺寸或者触发某些动画。
用法：
import Image from 'next/image';
function MyImageComponent() {
return (
<Image
src="/my-image.jpg"
alt="My Image"
width={500}
height={500}
onLoadingComplete={(result) => {
console.log('Image loaded!', result);
// 这里可以执行其他操作，比如启用图片动画
}}
/>
);
}
export default MyImageComponent;
通过这个回调函数，你可以在图片完全加载后执行自定义逻辑，进一步优化用户体验。
6. next/script 的 strategy 属性 —— 脚本加载控制
在现代 Web 应用中，加载第三方脚本是常见的需求。Next.js 提供的 next/script 组件允许你精确控制脚本的加载方式。通过 strategy 属性，你可以设置脚本在页面加载过程中的加载时机，比如 beforeInteractive、afterInteractive 或 lazyOnload。
用法：
import Script from 'next/script';
function MyPage() {
return (
<>
<h1>My Page</h1>
<Script
src="https://example.com/some-script.js"
strategy="afterInteractive" // 页面加载后加载脚本
onLoad={() => {
console.log('Script loaded!');
}}
/>
</>
);
}
export default MyPage;
这种方式可以优化脚本的加载顺序，避免阻塞关键资源的加载。
