Next.js 通常被视为 React 的扩展，但它不仅仅是一个构建 React 应用的框架，还带来了更多功能。本文深入探讨了 Next.js 与 React.js 的内部运作差异，突出了其独特的功能和优势。
1. 服务器端渲染 (SSR)
Next.js 提供开箱即用的服务器端渲染，这意味着你的组件可以在服务器上渲染，并以 HTML 形式发送到客户端。这种方式提升了性能，并改善了 SEO，因为搜索引擎可以索引完全渲染的页面。
示例：
// pages/index.js
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: { data }, // 传递给页面组件的 props
};
}
const HomePage = ({ data }) => {
return (
<div>
<h1>服务器端渲染的页面</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
export default HomePage;
2. 静态站点生成 (SSG)
Next.js 允许你在构建时预渲染页面，使其作为静态 HTML 文件提供。这大大提高了加载速度，并提升了内容丰富的网站的可扩展性。
示例：
// pages/products.js
export async function getStaticProps() {
const response = await fetch('https://api.example.com/products');
const products = await response.json();
return {
props: { products }, // 传递给页面组件的 props
revalidate: 10, // 每 10 秒重新生成页面
};
}
const ProductsPage = ({ products }) => {
return (
<div>
<h1>静态站点生成的产品列表</h1>
<ul>
{products.map(product => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
};
export default ProductsPage;
3. 基于文件的路由
Next.js 提供了基于文件的路由系统。你只需在 pages 目录下创建一个文件，它会自动成为一个路由。与 React 需要使用外部库（如 React Router）相比，这简化了路由过程。
示例：
- 在 pages 目录下创建名为 about.js 的文件，将自动生成 /about 路由。
// pages/about.js
const AboutPage = () => {
return <h1>关于我们</h1>;
};
export default AboutPage;
4. API 路由
Next.js 支持在前端代码旁边创建 API 端点，这意味着你可以在同一个框架中使用 React 和 Node.js 构建全栈应用程序。
示例：
// pages/api/users.js
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' });
}
你可以通过 /api/users 访问此 API 路由。
5. 自动代码分割
Next.js 自动将代码拆分为较小的包，只加载用户正在查看页面所需的 JavaScript。这大大提高了性能，减少了初始加载时间。
示例：
无需额外配置；Next.js 根据页面结构自动处理代码分割。
6. 图像优化
Next.js 内置了图像优化功能，能够以最佳格式、大小和质量提供图像。这样能提升性能，尤其是在较慢的网络下用户体验更加流畅。
示例：
import Image from 'next/image';
const ProfilePicture = () => {
return (
<Image
src="/profile.jpg"
alt="Profile Picture"
width={500}
height={500}
priority
/>
);
};
export default ProfilePicture;
7. 内置 CSS 和 Sass 支持
Next.js 提供内置的 CSS 和 Sass 支持，允许你无需额外配置即可轻松高效地为应用进行样式设计。
示例：
/* styles/Home.module.css */
.title {
color: blue;
}
// pages/index.js
import styles from '../styles/Home.module.css';
const HomePage = () => {
return <h1 className={styles.title}>欢迎来到 Next.js！</h1>;
};
export default HomePage;
8. 增量静态再生 (ISR)
Next.js 允许页面在初始构建后进行增量更新，这意味着你可以保持静态内容的最新状态，而无需重新构建整个网站。
示例：
// pages/blog/[id].js
export async function getStaticPaths() {
const paths = await fetchBlogPostIds(); // 从 API 获取帖子 ID
return {
paths,
fallback: true,
};
}
export async function getStaticProps({ params }) {
const post = await fetchBlogPost(params.id); // 根据 ID 获取帖子数据
return {
props: { post },
revalidate: 60, // 每分钟重新生成此页面
};
}
结论
Next.js 不仅仅是 React 的扩展，它提供了强大的功能，提升了性能、SEO 和开发者体验。通过利用服务器端渲染、静态站点生成、基于文件的路由和其他内置功能，开发者可以比单独使用 React 更高效地创建高性能的 Web 应用。
选择 Next.js 还是 React 取决于你的项目需求——如果你需要 SEO 优化或服务器端功能，Next.js 可能是更好的选择。
如果你觉得这篇指南有帮助，欢迎分享给他人！
本文深入比较了 Next.js 与 React.js，结合了最新示例，并通过改变代码片段中的变量名以符合现代 Web 开发实践，提升了清晰度和相关性。