掌握 Next.js 的 5 个必备技巧和窍门
亲爱的网络朋友们，大家好！今天的博客，我们将深入探讨使用 Next.js 的五个关键技巧。关于缓存、渲染客户端组件等概念，大家仍然存在很多困惑，所以我将在这里分享一些宝贵的见解，帮助你更流畅、更高效地进行 Next.js 开发。
现在，让我们来看看具体技巧！
技巧 1：在 Next.js 中处理图像
本地图像
Next.js 中一个常见的混淆领域是图像处理，特别是本地图像和远程图像之间的区别。
对于存储在public文件夹中的本地图像，您无需指定宽度和高度。Next.js 会自动识别这些属性。
例子：
import Image from 'next/image';
import myImage from '../public/ahoy.jpg';
export default function Home() {
return (
<div>
<Image src={myImage} alt="Ahoy" />
</div>
);
}
远程图像
对于远程图像，您需要提供宽度、高度和模糊数据等附加信息，以提高加载性能并避免内容布局偏移。
例如：
要为远程图像添加模糊效果，请使用sharpandplaceholder包生成 base64 编码的模糊数据。
1.安装软件包：
npm install sharp placeholder
2.创建一个实用函数：
import placeholder from 'placeholder';
import sharp from 'sharp';
export async function getBase64(url) {
const res = await fetch(url);
const buffer = await res.arrayBuffer();
const base64 = await placeholder(buffer);
return base64;
}
3.在组件中使用该函数：
import { getBase64 } from './utils/getBase64';
export default async function Home() {
const blurData = await getBase64('https://source.unsplash.com/random');
return (
<Image
src="https://source.unsplash.com/random"
width={800}
height={600}
alt="Random"
placeholder="blur"
blurDataURL={blurData}
/>
);
}
提示 2：环境变量
使用环境变量时，请注意其NEXT_PUBLIC_前缀。带有此前缀的变量会暴露给浏览器，使其可在客户端代码中访问。这对于公共设置很有用，但如果用于 API 密钥等敏感信息，则可能存在安全风险。
- 公共变量：带有前缀
NEXT_PUBLIC_并暴露给客户端。 - 私有变量：不带前缀，保存在服务器端。
例子：
NEXT_PUBLIC_API_URL=https://api.example.com
API_SECRET_KEY=your-secret-key
技巧 3：Next.js 中的缓存
Next.js 的缓存行为在开发环境和生产环境之间可能存在很大差异。
开发阶段：
在开发过程中，页面会动态刷新，立即反映更改。
生产环境：
Next.js 默认会尝试将页面渲染为静态页面。要控制此行为，请使用revalidate增量静态页面重新生成或force-dynamic始终获取最新数据的选项。
例子：
// Revalidate every 5 seconds
export const revalidate = 5;
// Force dynamic data fetching
export const dynamic = 'force-dynamic';
技巧 4：高效获取数据
避免在服务器组件中使用 API 路由处理程序来获取数据。而是直接在服务器组件中获取数据。这种方法可以利用 Next.js 的优化和缓存机制。
例子：
// Direct fetch in a server component
export default async function Home() {
const res = await fetch('https://api.example.com/jokes/random');
const data = await res.json();
return <div>{data.joke}</div>;
}
对于可重用的获取逻辑，创建服务器操作并在需要的地方导入它们。
// server/getJoke.js
import { server } from 'next/server';
export async function getJoke() {
const res = await fetch('https://api.example.com/jokes/random');
const data = await res.json();
return data;
}
// Home.js
import { getJoke } from '../server/getJoke';
export default async function Home() {
const joke = await getJoke();
return <div>{joke.joke}</div>;
}
提示 5：客户端和服务器组件
理解客户端组件和服务器组件之间的区别至关重要。默认情况下，页面是服务器组件，但您可以在页面中包含客户端组件以实现交互功能。
例子：
// Client component
'use client';
import { useState } from 'react';
export default function ClientComponent() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
// Server component
import ClientComponent from '../components/ClientComponent';
export default function Home() {
return (
<div>
<ClientComponent />
</div>
);
}
提供程序和子组件
当使用提供程序包装组件时（例如，为了主题化），请确保将子组件正确地视为服务器组件或客户端组件。
例子：
// theme.js
import { ThemeProvider } from 'styled-components';
export default function Theme({ children }) {
return <ThemeProvider theme={{}}>{children}</ThemeProvider>;
}
// layout.js
import Theme from '../components/theme';
export default function Layout({ children }) {
return (
<Theme>
{children}
</Theme>
);
}
结论
我希望这些技巧和窍门能够帮助澄清 Next.js 中的一些常见歧义。
文章来源：https://dev.to/vyan/5-essential-tips-and-tricks-for-mastering-nextjs-1p7g