江苏龙网

  1. 主页 > 生活百科 > >

记一次使用next.js开发官网经历

next.js

1.前情提要

  • 最近我司官网重构，一个官网配一个后台，目的是动态配置官网内容，以前都是数据库写死的，为了更好的运营网站，体现品牌影响力，于是有了这一次大变革 。
2.需求分析需求不复杂，基本就是几大模块的动态设置，产品介绍，新闻，职位等等 。既然是企业官网，就要考虑到几点问题:
  • seo
  • 界面快速响应，带来更好的用户体验
我们都知道，单页应用两大致命缺点，一个就是seo不友好，另一个就是白屏时间较长 。所谓seo就是搜索引优化，简单来说，单页应用dom结构都是js动态生成的，而爬虫更喜欢静态页面，故单页应用不利于seo 。而白屏加载主要是因为单页应用加载组件需要消耗时间，所以带来不友好的用户体验 。这两点在后台管理上表现不明显，但是用在企业官网或者博客之类的网站，就需要想办法解决 。
解决以上两种问题的最常用手段就是利用服务端渲染，所谓服务端渲染就是服务器直接返回html结构，很久很久以前，前后端不分离的年代,jsp渲染的方式就属于服务端渲染 。单页应用服务端渲染的方式一般是使用node作为中间层，加载组件之后，再向前台返回html结构，react vue也有相应的api支持服务端渲染，但是自己去做比较麻烦，我们可以使用比较成熟的服务端渲染框架next.js 。
3.next.js使用安装脚手架
npm install -g create-next-App生成项目
create-next-app myWebsite安装成功之后会有相应的提示:
记一次使用next.js开发官网经历

文章插图
 
cd myWebsiteyarn dev浏览器打开localhost:3000,出现以下页面，就表示一个项目启动成功了
记一次使用next.js开发官网经历

文章插图
 
下图是脚手架生成完毕的项目结构图：
记一次使用next.js开发官网经历

文章插图
 
我们的主页面将在pages下面进行创建开发，每个页面就是一个路由，index.js为主入口，假如我们在pages下创建一个product文件夹，product文件夹下创建一个index.js文件，那么在浏览器中输入localhost:3000/product就能访问到product页面 。
4.具体配置
  • 项目中必然涉及组件开发，所以根目录下创建components文件，所有的组件都放在此文件夹下，注意：按照next.js的规则，组件内是不能发送请求的，所有的请求需要放在主页面中 。
  • 静态文件放在哪里呢？例如图片，css文件等 。同样在根目录下建立static文件夹，可以在static文件夹下建立images或者css等文件
  • 项目的UI框架我们选用antd, 使用npm install antd 或者yarn add antd安装antd 。安装完毕之后需要配置antd按需加载，这个时候，需要在根目录创建.babelrc文件,在此文件中，加入以下代码:
{    "presets": ["next/babel"],    "plugins": [      [        "import",        {          "libraryName": "antd",          "style": "less"        }      ],      [        "@babel/plugin-proposal-decorators",        {          "legacy": true        }      ]    ]  }
  • 我们想在项目中使用css的同时也使用less文件，该怎么做呢？在根目录下建立next.config.js文件，在此文件中加入以下代码：
const withCss = require("@zeit/next-css");const widthLess = require('@zeit/next-less');if (typeof require !== 'undefined') {    require.extensions['.css'] = file => { }}module.exports = widthLess(withCss({  lessLoaderOptions: {    JAVAscriptEnabled: true,    importLoaders: 1,    localIdentName: "[local]___[hash:base64:5]",  },  distDir: 'build',  webpack: (config, { dev }) => {      config.module.rules.push(          {            test: /.(png|jpg|svg|eot|otf|ttf|woff|gif|woff2)$/,            use: {              loader: "url-loader?limit=8024",              options: {                name: "[name].[ext]"              }            }          },          {              test: [/.eot$/, /.ttf$/, /.svg$/, /.woff$/, /.woff2$/],              loader: require.resolve('file-loader'),              options: {                  name: '/static/media/[name].[hash:8].[ext]'              }          }      )      // config.plugins.push(new CleanWebpackPlugin())      return config  }}))


推荐阅读


上一篇：红茶拿铁和奶茶的区别,抹茶拿铁咖啡做法大全

下一篇：进入春茶采摘季,雨林古茶坊惊艳原始雨林古树春茶作品