梦想吧

480 分类: WEB前端

Next.js入坑第一步 -- Hello Next.js

介绍

首先来说一下Next.js到底是个什么东西,学过React的应该在React文档中看到过官方推荐

Next.js 是一个流行的、轻量级的框架,用于配合 React 打造静态化和服务端渲染应用。它包括开箱即用的样式和路由方案,并且假定你使用 Node.js 作为服务器环境。

QQ截图20191118114626.png

React项目是在客户端上渲染的,整个页面是一个空壳,没有任何内容,完全依靠JS进行插入,在JS加载完成之前,会出现短暂的白屏,而且由于搜索引擎蜘蛛不识别JS内容,不利于搜索引擎的SEO。所以有如下两点问题

  1. 在JS加载完成之前,会出现短暂的白屏
  2. 不利于搜索引擎SEO
    相信在将来对搜索引擎SEO的问题会逐渐被解决,目前Google,Bing等搜索引擎都已经可以正确抓取ReactVue等程序写的动态网站,国内支持比较低,所以针对国内用户的,还是尽量避免动态加载。

安装

可以安装Next.js官方提供的create-next-app脚手架进行安装,就像创建React应用一样
先全局安装脚手架

npm install -g create-next-app

然后执行

create-next-app 项目名

QQ截图20191118134442.png

QQ截图20191118134500.png

运行

开发阶段使用yarn dev来调试应用,部署应用先用yarn build打包,上传到正式环境中后使用yarn start来启动应用

Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd bityears-test
  yarn dev

#JS, JavaScript, React, Next.js

作者: Jim

版权: 除特别声明,均采用BY-NC-SA 4.0许可协议,转载请表明出处

目录Content

评论