next.js是什么？
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">Next.js 是一个基于 React 的开源框架，用于构建高性能、可扩展的 Web 应用程序。它由 Vercel（前身为 ZEIT）开发和维护，结合了 React 的组件化开发能力与服务器端渲染（SSR）、静态站点生成（SSG）等功能，使开发者能够更高效地构建现代化网站和应用。</div><h3 class="header-OdWb_u auto-hide-last-sibling-br">核心特性</h3>
<ol class="auto-hide-last-sibling-br">
<li>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">服务器端渲染（SSR）与静态站点生成（SSG）<br class="container-Vdm5p7 wrapper-_7axQ_ undefined">Next.js 支持两种预渲染模式：SSR 在请求时生成 HTML，SSG 在构建时生成 HTML。这两种模式都能提升 SEO 和首屏加载性能。</div>
</li>
<li>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">自动代码分割<br class="container-Vdm5p7 wrapper-_7axQ_ undefined">自动将代码分割为更小的块，仅在用户需要时加载，提高应用加载速度。</div>
</li>
<li>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">简单的路由系统<br class="container-Vdm5p7 wrapper-_7axQ_ undefined">使用文件系统路由，无需复杂配置。例如，创建<code>pages/about.js</code>文件会自动映射到<code>/about</code>路径。</div>
</li>
<li>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">API 路由<br class="container-Vdm5p7 wrapper-_7axQ_ undefined">内置支持创建 API 端点，无需额外配置服务器。</div>
</li>
<li>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">图像优化<br class="container-Vdm5p7 wrapper-_7axQ_ undefined">自动优化图像，支持响应式加载、懒加载和格式转换。</div>
</li>
<li>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">CSS 支持<br class="container-Vdm5p7 wrapper-_7axQ_ undefined">支持多种 CSS 方案，包括 CSS Modules、Tailwind CSS、Sass 等。</div>
</li>
</ol>
<h3 class="header-OdWb_u auto-hide-last-sibling-br">适用场景</h3>
<ul class="auto-hide-last-sibling-br">
<li>需要 SEO 优化的网站（如博客、电商平台）</li>
<li>对性能要求高的应用（减少客户端 JavaScript 执行）</li>
<li>静态内容为主的网站（SSG 模式）</li>
<li>前后端一体化应用（API 路由）</li>
</ul>
<h3 class="header-OdWb_u auto-hide-last-sibling-br">基本示例</h3>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">以下是一个简单的 Next.js 页面组件示例：</div>
<div class="relative w-fit custom-code-block-canvas-wrapper w-full">
<div class="code-block-element-Kq8H8v light custom-code-block-container--javascript hide-indicator disable-theme-style custom-code-block-container">
<div class="code-area-z8IfZP code-area" dir="ltr">
<div class="header-wrapper-OsF77N">
<div class="header-A8bf6p">
<div class="title-QMwu7c clickable-p6chjr" data-popupid="tejdos0">
<div class="icon-jzrQql">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> pages/index.js</span>
import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> HomePage() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><div>
<h1>Hello, Next.js!</h1>
<p>Welcome to my Next.js application.</p>
</div>
<span style="color: rgba(0, 0, 0, 1)">);
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> HomePage;</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br class="container-Vdm5p7 wrapper-_7axQ_ undefined">
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">这个组件会自动映射到网站的根路径（<code>/</code>）。如果需要服务器端渲染，可以添加<code>getServerSideProps</code>函数：</div>
<div class="relative w-fit custom-code-block-canvas-wrapper w-full">
<div class="code-block-element-Kq8H8v light custom-code-block-container--javascript hide-indicator disable-theme-style custom-code-block-container">
<div class="code-area-z8IfZP code-area" dir="ltr">
<div class="header-wrapper-OsF77N">
<div class="header-A8bf6p">
<div class="title-QMwu7c clickable-p6chjr" data-popupid="0mge344">
<div class="icon-jzrQql">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> pages/posts/.js</span>
export async <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> getServerSideProps(context) {
const res </span>= await fetch(`https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">api.example.com/posts/${context.query.id}`);</span>
const post =<span style="color: rgba(0, 0, 0, 1)"> await res.json();
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
props: {
post,
},
};
}
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Post({ post }) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
<span style="color: rgba(0, 0, 0, 1)">);
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Post;</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 class="header-OdWb_u auto-hide-last-sibling-br">如何开始</h3>
<ol class="auto-hide-last-sibling-br">
<li>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">安装：使用<code>create-next-app</code>快速初始化项目</div>
<div class="relative w-fit custom-code-block-canvas-wrapper w-full">
<div class="code-block-element-Kq8H8v light custom-code-block-container--bash hide-indicator disable-theme-style custom-code-block-container">
<div class="code-area-z8IfZP code-area" dir="ltr">
<div class="content-qydEZG code-content light-scrollbar-Lun507">
<pre class="container-GJFPCm language-bash"><code class="language-bash">npx create-next-app my-next-app
<span class="token builtin class-name">cd my-next-app
<span class="token function">npm run dev
</span></span></code></pre>
</div>
<div class="mask-wrapper-ARWxJv"> </div>
</div>
</div>
</div>
</li>
<li>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">开发：在<code>pages</code>目录下创建页面组件</div>
</li>
<li>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">构建与部署：</div>
<div class="relative w-fit custom-code-block-canvas-wrapper w-full">
<div class="code-block-element-Kq8H8v light custom-code-block-container--bash hide-indicator disable-theme-style custom-code-block-container">
<div class="code-area-z8IfZP code-area" dir="ltr">
<div class="content-qydEZG code-content light-scrollbar-Lun507">
<pre class="container-GJFPCm language-bash"><code class="language-bash"><span class="token function">npm run build <span class="token comment"># 生成优化后的生产版本
<span class="token function">npm run start <span class="token comment"># 启动生产服务器
</span></span></span></span></code></pre>
</div>
<div class="mask-wrapper-ARWxJv"> </div>
</div>
</div>
</div>
</li>
</ol><br class="container-Vdm5p7 wrapper-_7axQ_ undefined">
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">Next.js 适合各类规模的项目，尤其适合需要高性能和 SEO 友好的应用。它的灵活性使其成为 React 生态系统中最受欢迎的框架之一。</div>
<div class="auto-hide-last-sibling-br paragraph-Oc488D paragraph-element br-paragraph-space">参考：https://www.doubao.com/chat/9502460983176706</div><br><br>
来源：https://www.cnblogs.com/2008nmj/p/18938943
頁:
[1]