Next.js 零基础开发入门教程2 构建基础脚手架 2024最新更新中｜曲速引擎 Warp Drive
<h2 id="开发目标" data-source-line="3">开发目标</h2><p data-source-line="4">我们将构建一个简化版本的财务仪表板，其内容包括：<br>公共主页、登录页面、受身份验证保护的仪表板页面、用户可以添加、编辑和删除发票<br><img src="https://pic.dataeast.cn/picture/20240929114738.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20240929114738.png"></p>
<p data-source-line="8">这篇文章先创建一个简单的nextjs脚手架页面<br><img src="https://pic.dataeast.cn/picture/20241008103345.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008103345.png"></p>
<h2 id="安装pnpm包管理器" data-source-line="11">安装pnpm包管理器</h2>
<p data-source-line="12">接上一篇，开发环境都准备好之后，我们来做创建项目的准备，首先先判断上一篇的环境是否配置完整，输入 <code>node -v</code> 和 <code>npm -v</code>,我们当前开发采用v20.17.0 版本和10.8.2版本，npm的版本影响不大更新到最新即可，node的版本尽量按照我的参考版本进行。<br><img src="https://pic.dataeast.cn/picture/20241008100734.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008100734.png"><br>安装pnpm，这是一个包管理器，它比npm或更快、更高效yarn，<code>npm install -g pnpm</code>，安装完成之后 pnpm -v 查看版本，如果正常输出版本则安装成功。<br><img src="https://pic.dataeast.cn/picture/20241008101133.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008101133.png"></p>
<h2 id="创建nextjs项目" data-source-line="17">创建nextjs项目</h2>
<p data-source-line="18">使用pnpm进行安装新的项目脚手架 <code>npx create-next-app@latest . --use-pnpm</code> ，当使用国内网络进行安装的时候会变得非常的缓慢，一直转圈圈<br><img src="https://pic.dataeast.cn/picture/20241008102042.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008102042.png"><br>因此这里需要使用国内的镜像源进行安装，我们这里使用淘宝镜像源地址：https://registry.npmmirror.com<br>使用命令 <code>pnpm config set registry https://registry.npmmirror.com</code> 将官方源改成淘宝的镜像源地址<br><img src="https://pic.dataeast.cn/picture/20241008102231.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008102231.png"><br>然后所有选择按回车键即可，等待下载完毕<br><img src="https://pic.dataeast.cn/picture/20241008102322.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008102322.png"></p>
<h2 id="运行nextjs项目" data-source-line="26">运行nextjs项目</h2>
<p data-source-line="27">在终端命令行执行<code>pnpm run dev</code>即可运行我们的第一个nextjs网站<br><img src="https://pic.dataeast.cn/picture/20241008102726.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008102726.png"><br>然而，我们会发现http://localhost:3000 在我们本地浏览器并不能访问，由于我们开发的时候使用的是远程开发，localhost的地址相当于服务端的本地地址，因此在客户端是不能访问的，这里我们需要对package.json文件进行改造一下。<br><img src="https://pic.dataeast.cn/picture/20241008102927.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008102927.png"><br>将dev修改为 <code>"dev": "next dev -H 0.0.0.0 -p 80",</code> 也就是下面图片的样子<br><img src="https://pic.dataeast.cn/picture/20241008103055.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008103055.png"><br>再次运行<code>pnpm run dev</code> 即可将服务端的网站映射出来，这里我们使用http://172.16.100.104进行访问，这里要注意，IP为你的服务端IP与本教材不一定一样，端口也可能不是80，实际按照自己方便修改，需要注意一下<br><img src="https://pic.dataeast.cn/picture/20241008103252.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008103252.png"><br><img src="https://pic.dataeast.cn/picture/20241008103345.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008103345.png"><br>以上就是nextjs基本项目的创建过程，下一篇将介绍如何改造这个脚手架，变成自己的网站实现需要的功能。</p>
<h2 id="nextjs的一些基本概念" data-source-line="38">nextjs的一些基本概念</h2>
<p data-source-line="39">一、什么是npm、pnpm 、npx<br>npm (Node Package Manager)，npm 是 Node.js 的默认包管理器。它主要用于：安装 JavaScript 包、管理项目依赖、运行脚本</p>
<pre><code data-source-line="41"># 安装包
npm install package-name
# 运行脚本
npm run script-name
</code></pre>
<p data-source-line="48">pnpm (Performant npm)，pnpm 是 npm 的替代品，旨在提高性能和效率：使用硬链接和符号链接来节省磁盘空间，更快的安装速度，更严格的包管理</p>
<pre><code data-source-line="49"># 安装 pnpm
npm install -g pnpm
# 使用 pnpm 安装包
pnpm add package-name
</code></pre>
<p data-source-line="57">npx (Node Package Execute)，npx 是一个 npm 包运行器，它可以：执行本地或远程 npm 包中的命令，无需全局安装就能运行包</p>
<pre><code data-source-line="58"># 使用 npx 运行包，无需安装
npx create-react-app my-app
</code></pre>
<p data-source-line="63">npm: 包管理器，用于安装和管理依赖。<br>pnpm: npm 的高效替代品，节省空间和提高速度。<br>npx: 用于执行包，特别是一次性使用的命令行工具。</p>
<p data-source-line="67">二、nextjs 基本目录代表含义<br><img src="https://pic.dataeast.cn/picture/20241008104333.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241008104333.png"><br>详细解释:<br>1.app/:这是 Next.js 13+版本引入的新的应用目录结构。它包含了你的应用程序的路由和页面组件。<br>2.next.config.mjs :Next.js 的配置文件，用于自定义Next.js的行为，如添加环境变量、配置 webpack 等。<br>3. next-env.d.ts :包含 Next.js 类型的TypeScript声明文件，确保TypeScript能正确识别Next.js的类型。<br>4. node_modules/:存放所有项目依赖的目录，通过npm 或pnpm 安装的包都在这里。<br>5. package.json:定义项目的元数据、脚本和依赖关系的文件。<br>6.pnpm-lock.yaml : pnpm 的依赖锁定文件，确保团队成员使用相同版本的依赖。<br>7.postcss.config.mjs : PostcsS 的配置文件，通常用于配置Tailwind CSS 和其他 cSS 处理工具。<br>8.README.md:项目的说明文档，通常包含项目描述、安装和使用说明等。<br>9.tailwind.config.ts :Tailwind CSS 的配置文件，用于自定义Tailwind的主题、变体等。</p>
<p data-source-line="80">更详细内容查看</p>
<blockquote data-source-line="81">
<p>独立博客 https://www.dataeast.cn/<br>CSDN博客 https://blog.csdn.net/siberiaWarpDrive<br>B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0<br>关注 “曲速引擎 Warp Drive” 微信公众号<br><img src="https://pic.dataeast.cn/picture/20241016170749.png?ynotemdtimestamp=1729082690996" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241016170749.png"></p>
</blockquote><br><br>
来源：https://www.cnblogs.com/XiaoH160309/p/18471026
頁:
[1]