从做中学01-Next.js

袁俊强 發表於 2021-3-15 00:01:00

<h1>一.Nextjs的简单介绍</h1>
Next.js 是一个轻量级的 React 服务端渲染应用框架
与客户端渲染相比，其优势在于：①更利于SEO；②利于首屏加载
当使用 React 开发系统的时候，常常需要配置很多繁琐的参数，如 Webpack 配置、Router 配置和服务器配置等。如果需要做 SEO，要考虑的事情就更多了，怎么让服务端渲染和客户端渲染保持一致是一件很麻烦的事情，需要引入很多第三方库。针对这些问题，Next.js提供了一个很好的解决方案，使开发人员可以将精力放在业务上，从繁琐的配置中解放出来。
<h1>二.Nextjs特性介绍</h1>
Next.js 具有以下几点特性：
<ul>
<li>默认支持服务端渲染</li>
<li>自动根据页面进行代码分割</li>
<li>简洁的客户端路由方案（基于页面）</li>
<li>基于 Webpack 的开发环境，支持热模块替换</li>
<li>可以跟 Express 或者其它 Node.js 服务器完美集成</li>
<li>支持 Babel 和 Webpack 的配置项定制</li>
</ul>
 
<h1>三.搭建Nextjs项目</h1>
搭建Nextjs的前提条件是node的安装
安装好了之后我们要开启Nextjs之旅啦~
 
打开cmd，执行以下命令：
<div class="cnblogs_code">
<pre>mkdir NextDemo //创建一个NextDemo目录
cd NextDemo
npm init//项目初始化</pre>
</div>
将文件拖到vsCode，打开package.json，可以看到dependencies，里面全都是项目的依赖包及其版本号
在scripts里面添加以下内容：
<div class="cnblogs_code">
<pre>{
"scripts": { //添加命令
"dev": "next",
"build": "next build",
"start": "next start"
}
}</pre>
</div>
新建一个pages文件夹，只要在pages文件夹下面的文件，nextjs会自动帮我们进行路由的设置，新建一个index.js
<div class="cnblogs_code">
<pre>function Index(){ 　　return ( 　　　　<div>Hello Next.js</div> 　　) } export default Index</pre>
</div>
在控制台输入<code>npm run dev</code>，这时候在浏览器输入<code>http://localhost:3000</code>，就能看到效果了，第一个nextjs项目就这样完成啦。
<img src="https://img2020.cnblogs.com/blog/2263364/202103/2263364-20210315105218910-107667744.png">
 最后，谈一下感受：用Nextjs写的网页，和我们平时看到的网页似乎有所不同，不过这也许是其魅力之处。目前只是初步了解nextjs，后面还有很多相关知识，继续努力学习。
  
来源：https://www.cnblogs.com/cjml/p/14531589.html

頁: [1]

琼殿技术论坛's Archiver

从做中学01-Next.js