JS 学习笔记: 我的第一个Next.js网站
<h1 id="实验环境">实验环境</h1><h2 id="软件版本">软件版本</h2>
<p>操作系统： Fedora35</p>
<pre><code class="language-csharp">// on Fedora35
nodejs-16.14.0-2.fc35.x86_64
npm-8.3.1-1.16.14.0.2.fc35.x86_64
yarnpkg-1.22.10-3.fc35.noarch
</code></pre>
<h2 id="软件包说明">软件包说明</h2>
<p><strong>nodejs</strong>: nodejs 语言支持, 提供node命令</p>
<p><strong>npm</strong>: node package manager, 提供npm, npx命令</p>
<ul>
<li>npm类似于Python里面的Pip</li>
<li>npx 可以直接执行npm包的命令</li>
</ul>
<p><strong>yarnpkg</strong>: 提供yarn命令，功能跟npm命令基本一样。很多时候可以互换</p>
<h1 id="quick-start">Quick Start</h1>
<p>从0开始创建一个项目</p>
<pre><code class="language-cpp">npx create-next-app my-static-nextjs-app
// 用create-next-app的npm包提供的命令创建一个样板项目，项目放在本地目录my-static-nextjs-app
// 在这个过程中会自动做进到这个本地目录里面执行:
// 1. 安装下载项目需要的依赖包（类似于yarn isntall)，默认下载路径./node_modules
// 2. git init初始化为repo
// 注意.gitignore文件的内容, ./node_modules就是不计入的
关于 **create-next-app**的更多信息，可以参考:
https://www.npmjs.com/package/create-next-app
https://nextjs.org/docs/api-reference/create-next-app
</code></pre>
<h1 id="启动开发模式">启动开发模式</h1>
<pre><code class="language-cpp">$ yarn dev // or: npm run dev
// 这里的dev命令其实都是package.json里面定义的
</code></pre>
<p>可以通过http://ip:3000 或者 http://localhost:3000 访问</p>
<h1 id="构建并启动开发模式">构建并启动开发模式</h1>
<p>在package.json文件里面定义好了build和start命令</p>
<pre><code class="language-cpp">"scripts": {
....
"build": "next build",
"start": "next start",
.....
</code></pre>
<p>直接运行即可</p>
<pre><code class="language-cpp">$ yarn build
// will generate .next folder, which is ignored by git
$ yarn start
// start the server at 0.0.0.0:3000 and localhost:3000
</code></pre>
<p>可以通过http://ip:3000 或者 http://localhost:3000 访问</p><br><br>
来源：https://www.cnblogs.com/yahoon/p/16201037.html 哇，楼主太棒了！分享这么详细的Next.js学习笔记， Fedora35 + Node.js 16的配置很稳啊！
给新手的一点小建议：
1. Next.js的App Router（13+版本）和原来的Pages Router有点区别，如果用的是新版的话可以注意一下
2. 开发阶段用很方便，不过 + 的组合更适合部署前的测试，能提前发现一些生产环境的问题
3. .next文件夹和node_modules记得都要放.gitignore里，楼主已经注意到了这点很赞！
期待后续更新！
顺便问一下，楼主后面打算做什么类型的项目呀？是用Next.js做博客，还是做其他应用？一起交流交流～
Next.js官方文档 写得挺详细的，配合楼主的笔记一起看效果更佳！
加油💪 期待看到你的第一个完整项目！
頁:
[1]