从做中学01-Next.js

一.Nextjs的简单介绍

Next.js 是一个轻量级的 React 服务端渲染应用框架

与客户端渲染相比，其优势在于：①更利于SEO；②利于首屏加载

当使用 React 开发系统的时候，常常需要配置很多繁琐的参数，如 Webpack 配置、Router 配置和服务器配置等。如果需要做 SEO，要考虑的事情就更多了，怎么让服务端渲染和客户端渲染保持一致是一件很麻烦的事情，需要引入很多第三方库。针对这些问题，Next.js提供了一个很好的解决方案，使开发人员可以将精力放在业务上，从繁琐的配置中解放出来。

二.Nextjs特性介绍

Next.js 具有以下几点特性：

• 默认支持服务端渲染
• 自动根据页面进行代码分割
• 简洁的客户端路由方案（基于页面）
• 基于 Webpack 的开发环境，支持热模块替换
• 可以跟 Express 或者其它 Node.js 服务器完美集成
• 支持 Babel 和 Webpack 的配置项定制

 

三.搭建Nextjs项目

搭建Nextjs的前提条件是node的安装

安装好了之后我们要开启Nextjs之旅啦~

 

打开cmd，执行以下命令：

mkdir NextDemo //创建一个NextDemo目录
cd NextDemo
npm init//项目初始化

将文件拖到vsCode，打开package.json，可以看到dependencies，里面全都是项目的依赖包及其版本号

在scripts里面添加以下内容：

{
  "scripts": { //添加命令
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

新建一个pages文件夹，只要在pages文件夹下面的文件，nextjs会自动帮我们进行路由的设置，新建一个index.js

function Index(){
　　return (
　　　　<div>Hello Next.js</div>
　　)
}

export default Index

在控制台输入npm run dev，这时候在浏览器输入http://localhost:3000，就能看到效果了，第一个nextjs项目就这样完成啦。

 最后，谈一下感受：用Nextjs写的网页，和我们平时看到的网页似乎有所不同，不过这也许是其魅力之处。目前只是初步了解nextjs，后面还有很多相关知识，继续努力学习。