完整教程：Next.js项目演示（从零创建Next.js项目）Next.js入门实战
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style>
<div class="markdown_views prism-tomorrow-night" id="content_views"><svg style="display: none" xmlns="http://www.w3.org/2000/svg"><path d="M5,0 0,2.5 5,5z" id="raphael-marker-block" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path></svg><p></p><div class="toc"><h4>文章目录</h4><ul><li>什么是Next.js？</li><li>准备工作</li><li>创建Next.js项目</li><li><ul><li>步骤1：创建项目目录</li><li>步骤2：初始化Next.js项目</li><li>步骤3：安装依赖</li><li>步骤4：启动开发服务器</li><li>步骤5：打开浏览器查看</li></ul></li><li>了解项目结构</li><li>自定义我们的第一个页面</li><li>添加一个新页面</li><li>使用链接导航（注意：本演示代码基于next 15.5.4版本）</li><li>常见问题</li><li><ul><li>**Q: 我在创建项目时遇到了错误怎么办？**</li><li>**Q: 为什么我的页面没有更新？**</li></ul></li><li>结束语</li><li>下一步</li></ul></div><p></p><p>如果你是前端开发新手，或者想学习React的服务器端渲染框架，那么Next.js绝对是一个很好的起点。今天，我将带你一步步创建一个简单的Next.js项目，即使你是完全的初学者，也能轻松上手。</p><h2>什么是Next.js？</h2><p>Next.js是一个基于React的框架，它提供了很多开箱即用的功能，比如：</p><ul><li>服务端渲染(SSR)</li><li>静态站点生成(SSG)</li><li>路由系统</li><li>API路由</li><li>优化的开发体验</li></ul><h2>准备工作</h2><p>在开始之前，你需要确保已经安装了Node.js。Next.js是基于Node.js的，所以需要先安装Node.js。</p><ol><li>前往Node.js官网下载并安装Node.js（建议安装LTS版本）</li><li>安装完成后，打开终端（命令行）并输入以下命令检查是否安装成功：<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash">node -v
<span class="token function">npm</span> -v</code></pre> 如果显示版本号，说明安装成功。</li></ol><h2>创建Next.js项目</h2><p>现在，让我们开始创建我们的第一个Next.js项目。</p><h3>步骤1：创建项目目录</h3><p>首先，创建一个新文件夹来存放我们的项目：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash"><span class="token function">mkdir</span> nextjs-demo
<span class="token builtin class-name">cd</span> nextjs-demo</code></pre>
<h3>步骤2：初始化Next.js项目</h3><p>在项目目录中，使用npx命令创建Next.js项目：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash">npx create-next-app@latest</code></pre>
<p>这会启动一个交互式设置向导，会问你几个问题：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code>What is your project named? (nextjs-demo)
Would you like to use TypeScript? (No / Yes) → 选择 No
Would you like to use ESLint? (No / Yes) → 选择 No
Would you like to use Tailwind CSS? (No / Yes) → 选择 No
Would you like to use `src/` directory with the App Router? (No / Yes) → 选择 No
Would you like to use a custom `app/` directory? (No / Yes) → 选择 No
What import alias would you like to use? (Leave empty to use the default) → 直接回车</code></pre>
<p>等待项目创建完成（大约需要1-2分钟）。</p><p><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/670e61d4d560437a9e7c12429c369f70.png"><br><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/31722fccdce245349b20165c25047354.png"></p><h3>步骤3：安装依赖</h3><p>项目创建完成后，会自动安装依赖。如果没有自动安装，可以手动运行：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash"><span class="token function">npm</span> <span class="token function">install</span></code></pre>
<p><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/d735684a5c04470991b2c6b55e9b7ba2.png"></p><h3>步骤4：启动开发服务器</h3><p>现在，我们可以启动开发服务器了：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash"><span class="token function">npm</span> run dev</code></pre>
<p>这会启动开发服务器，并在终端显示类似以下信息：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code>Ready on http://localhost:3000</code></pre>
<p><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/02943d450fc74afbbe970f063db1bd00.png"></p><h3>步骤5：打开浏览器查看</h3><p>在浏览器中打开 <code>http://localhost:3000</code>，你应该能看到Next.js的欢迎页面。<br><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/494c5b71091648db9489cfafedf56e2b.png"></p><h2>了解项目结构</h2><p>Next.js项目的结构相对简单：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code>nextjs-demo/
├── node_modules/
├── pages/
│ ├── index.js # 默认首页
│ └── ...
├── public/
├── styles/
├── package.json
└── ...</code></pre>
<ul><li><code>pages/</code> 目录：这是Next.js的路由系统，每个JS文件对应一个路由</li><li><code>index.js</code>：默认页面，对应根路由 <code>/</code></li><li><code>public/</code>：存放静态资源，如图片、favicon等</li></ul><p><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/28cab665aad34eb18ee9c0113cd19a59.png"></p><h2>自定义我们的第一个页面</h2><p>让我们来修改默认的首页，让它显示我们自己的内容。</p><p>打开 <code>pages/index.js</code> 文件，将内容替换为：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontFamily<span class="token operator">:</span> <span class="token string">'Arial, sans-serif'</span><span class="token punctuation">,</span> maxWidth<span class="token operator">:</span> <span class="token string">'800px'</span><span class="token punctuation">,</span> margin<span class="token operator">:</span> <span class="token string">'0 auto'</span><span class="token punctuation">,</span> padding<span class="token operator">:</span> <span class="token string">'2rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator"><</span>h1 style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">'#0070f3'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>欢迎来到我的Next<span class="token punctuation">.</span>js应用<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span>
<span class="token operator"><</span>p style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontSize<span class="token operator">:</span> <span class="token string">'1.2rem'</span><span class="token punctuation">,</span> lineHeight<span class="token operator">:</span> <span class="token string">'1.6'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
这是我第一个Next<span class="token punctuation">.</span>js页面！Next<span class="token punctuation">.</span>js让React应用的开发变得简单而高效。
<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator"><</span>p style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginTop<span class="token operator">:</span> <span class="token string">'1.5rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator"><</span>strong<span class="token operator">></span>提示：<span class="token operator"><</span><span class="token operator">/</span>strong<span class="token operator">></span>你可以随时修改这个页面内容，保存后浏览器会自动更新。
<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span></code></pre>
<p><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/4f29006316b9441fba55f071bec39752.png"></p><p>保存文件，然后刷新浏览器，你应该能看到新的内容。</p><p><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/6a38f460b29444739ab53d19aa2e8866.png"></p><h2>添加一个新页面</h2><p>让我们再添加一个新页面，比如"关于"页面。</p><ol><li><p>在 <code>pages/</code> 目录下创建一个新的文件 <code>about.js</code>：</p> <pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash"><span class="token function">touch</span> pages/about.js</code></pre> <p><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/89949c60595842a4b518dcd54e0161f2.png"></p></li><li><p>编辑 <code>about.js</code> 文件，内容如下：</p> <pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">About</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontFamily<span class="token operator">:</span> <span class="token string">'Arial, sans-serif'</span><span class="token punctuation">,</span> maxWidth<span class="token operator">:</span> <span class="token string">'800px'</span><span class="token punctuation">,</span> margin<span class="token operator">:</span> <span class="token string">'0 auto'</span><span class="token punctuation">,</span> padding<span class="token operator">:</span> <span class="token string">'2rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator"><</span>h1 style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">'#0070f3'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>关于页面<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span>
<span class="token operator"><</span>p style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontSize<span class="token operator">:</span> <span class="token string">'1.2rem'</span><span class="token punctuation">,</span> lineHeight<span class="token operator">:</span> <span class="token string">'1.6'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
这是我的关于页面。Next<span class="token punctuation">.</span>js的路由系统让创建新页面变得非常简单。
<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator"><</span>p style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginTop<span class="token operator">:</span> <span class="token string">'1.5rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
你可以在 <span class="token operator"><</span>code<span class="token operator">></span>pages<span class="token operator">/</span>about<span class="token punctuation">.</span>js<span class="token operator"><</span><span class="token operator">/</span>code<span class="token operator">></span> 文件中修改这个页面。
<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span></code></pre> </li><li><p>然后，打开浏览器访问 <code>http://localhost:3000/about</code>，你应该能看到新的页面。<br><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/4fecd0e6fc914ca0a5c99a148ecde617.png"></p></li></ol><h2>使用链接导航（注意：本演示代码基于next 15.5.4版本）</h2><p>Next.js提供了<code>Link</code>组件，用于在页面之间导航，避免页面刷新。</p><ol><li>打开 <code>pages/index.js</code> 文件</li><li>添加以下代码到页面中：</li></ol>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-js"><span class="token keyword">import</span> Link <span class="token keyword">from</span> <span class="token string">'next/link'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontFamily<span class="token operator">:</span> <span class="token string">'Arial, sans-serif'</span><span class="token punctuation">,</span> maxWidth<span class="token operator">:</span> <span class="token string">'800px'</span><span class="token punctuation">,</span> margin<span class="token operator">:</span> <span class="token string">'0 auto'</span><span class="token punctuation">,</span> padding<span class="token operator">:</span> <span class="token string">'2rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator"><</span>h1 style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">'#0070f3'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>欢迎来到我的Next<span class="token punctuation">.</span>js应用<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span>
<span class="token operator"><</span>p style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> fontSize<span class="token operator">:</span> <span class="token string">'1.2rem'</span><span class="token punctuation">,</span> lineHeight<span class="token operator">:</span> <span class="token string">'1.6'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
这是我第一个Next<span class="token punctuation">.</span>js页面！Next<span class="token punctuation">.</span>js让React应用的开发变得简单而高效。
<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginTop<span class="token operator">:</span> <span class="token string">'2rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator"><</span>Link
href<span class="token operator">=</span><span class="token string">"/about"</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
backgroundColor<span class="token operator">:</span> <span class="token string">'#0070f3'</span><span class="token punctuation">,</span>
color<span class="token operator">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span>
padding<span class="token operator">:</span> <span class="token string">'0.8rem 1.5rem'</span><span class="token punctuation">,</span>
borderRadius<span class="token operator">:</span> <span class="token string">'4px'</span><span class="token punctuation">,</span>
textDecoration<span class="token operator">:</span> <span class="token string">'none'</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">></span>
前往关于页面
<span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span></code></pre>
<p><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/61f4a6c188194da4908fc077258c3ffe.png"></p><ol start="3"><li>保存文件，然后在浏览器中点击"前往关于页面"链接，应该会跳转到About页面，但不会刷新整个页面。<br><img alt="在这里插入图片描述" src="https://i-blog.csdnimg.cn/direct/d0301733fa864d508079e5316df86aa4.png"></li></ol><p>（实际运行时，你会看到一个简单的页面，包含"欢迎来到我的Next.js应用"和一个"前往关于页面"的链接）</p><h2>常见问题</h2><h3><strong>Q: 我在创建项目时遇到了错误怎么办？</strong></h3><p>A: 确保你已经安装了最新版本的Node.js。如果问题持续，可以尝试运行<code>npm install</code>手动安装依赖。</p><h3><strong>Q: 为什么我的页面没有更新？</strong></h3><p>A: Next.js开发服务器通常会自动检测文件变化并重新加载。如果问题仍然存在，尝试重启开发服务器（Ctrl+C停止，然后重新运行<code>npm run dev</code>）。</p><p><strong>Q: 我想使用TypeScript，应该怎么做？</strong><br> A: 在创建项目时，选择"yes"即可。Next.js会为你设置好TypeScript配置。</p><h2>结束语</h2><p>恭喜！你已经成功创建并运行了你的第一个Next.js项目。你已经学会了：</p><ul><li>如何创建Next.js项目</li><li>如何自定义页面</li><li>如何在页面之间导航</li></ul><p>Next.js还有很多强大的功能等待你去探索，比如API路由、数据获取、CSS框架集成等。</p><h2>下一步</h2><p>现在，你已经掌握了Next.js的基础知识，可以尝试：</p><ul><li>添加更多的页面</li><li>使用CSS模块或全局CSS</li><li>集成一个简单的API</li><li>学习Next.js的高级功能，如数据获取和预渲染</li></ul><p>希望这篇教程对你有所帮助！如果你有任何问题，欢迎在评论区留言。</p><p><strong>动手试试吧！</strong> 你已经迈出了学习Next.js的第一步，接下来就是不断实践和探索了！</p></div>
---
<div style="background: rgba(240, 249, 255, 1); padding: 15px 18px; border: 1px solid rgba(59, 130, 246, 1); border-radius: 8px; margin-top: 30px">
<h3 style="color: rgba(29, 78, 216, 1); margin-top: 0; font-size: 16px"> 精选好课</h3>
<p style="color: rgba(102, 102, 102, 1); font-size: 13px; margin-bottom: 12px">本文涉及的技术，这些课程讲得更深入：</p>
<ol style="line-height: 2; font-size: 14px; padding-left: 20px">
<li><strong>React实战进阶45讲</strong><br>
<span style="color: rgba(136, 136, 136, 1); font-size: 13px"> 王沛 | 全面掌握React开发</span></li>
<li><strong>重学前端</strong><br>
<span style="color: rgba(136, 136, 136, 1); font-size: 13px"> 程劭非（winter） | 系统化梳理前端知识体系</span></li>
</ol>
</div><br><br>
来源：https://www.cnblogs.com/slgkaifa/p/19124249
頁:
[1]