Next.js

Summary of recent next. Js development

1. Initialize the Demo case

Nextjs. Frontendx. Cn # / docs/installation

According to the official website operation, basically can achieve a Hellow demo, the first step has been completed

Antd introduction and LESS (Topic configuration)&& static resource services

yarn add antd @zeit/next-less less less-loader less-vars-to-js

.@zeit/next-less is an official recommended style solution for next. Js, SCSS, CSS,stylus, and less-vars-to-js are also available for theme configuration. Next. Config. js is the official configuration file for developers. Static resource service is a little small pit, img url directly link static this is no problem, but the introduction of the background image is sometimes cannot resolve, but sometimes, the other is in the development mode, the new road by the page is not loaded in time rendering style file, it is ok to refresh again, in a production environment, of course, is not the problem

const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js"); Const themeVariables = lessToJS(fs.readfilesync (path.resolve(__dirname,"./assets/antd-custom.less"), "utf8")); // fix: prevents error when .less files are required by nodeif(typeof require ! = ="undefined") {
  require.extensions[".less"] = file => {};
}
module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables,
    localIdentName: "[local]___[hash:base64:5]"
  },
  webpack(config,options){
      returnConfig // Custom webpack configuration}})Copy the code

3. Customize routes

The default route is named in the pages file, for example, a.js and b.js in the pages file, so the route name is /a,/b. As the project gets bigger and bigger, the name is not easy to choose, so the routing is usually controlled on the server side and new server.js is created under the global directory

const express = require("express"); Const next = require(const next = require("next");
const compression = require("compression"); // devProxy = {const devProxy = {const devProxy = {"/front": {
    target: "Http://10.37.0. * * * : 84",
    pathRewrite: { "^/front": "/front" },
    changeOrigin: true}}; / / proxy configuration const port = parseInt (process. The env. Port, 10) | | 3000; const env = process.env.NODE_ENV; const dev = env ! = ="production";
const app = next({
  dir: ".", // base directory where everything is, could move to src later
  dev
});

const handle = app.getRequestHandler();
let server;
app
  .prepare()
  .then(() => {
    server = express();
    // Set up the proxy.
    if (dev && devProxy) {
      const proxyMiddleware = require("http-proxy-middleware");
      Object.keys(devProxy).forEach(function(context) {
        server.use(proxyMiddleware(context, devProxy[context]));
      });
    }
    if(! dev) { server.use(compression()); //gzip } server.get("/login", (req, res) => {
      app.render(req, res, "/login"); }); // redefine server.get("/", (req, res) => {
      app.render(req, res, "/home");
    });
    server.all("*", (req, res) => handle(req, res));
    server.listen(port, err => {
      if (err) {
        throw err;
      }
      console.log(`> Ready on port ${port} [${env}] `); }); }) .catch(err => { console.log("An error occurred, unable to start the server");
    console.log(err);
  });
Copy the code

After the configuration is complete, the package.json file should also be changed accordingly

{
  "scripts": {
    "dev": "node server.js"."build": "next build"."start": "NODE_ENV=production node server.js"}}Copy the code

4. Data request

The data request is mainly divided into two parts, one is the client request and the other is the server request. Page initialization data is put on the server, form submission content is put on the client, list page is first put on the server, and then the client server request is put on the next. Its built-in properties:

  • Pathname – The path part of the URL
  • Query-the Query part of the URL, which is parsed into objects
  • AsPath – The actual path (including the query part) displayed in the browser is of type String
  • Req-http request object (server-side only)
  • Res-http return object (server side only)
  • JsonPageRes – Get the data response object (only available on the client)
  • Err – Any errors in the rendering process
Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
Copy the code

Isomorphic-unfetch is a very important data request plug-in, which can be used in both browser and node. It is most suitable for client request in next.js. It is fecth, which is mainly about data transfer and storage. redux,react-redux,redux-saga,redux-persist,

  • Redux document www.redux.org.cn/
  • Story – redux-saga.js.org/ saga document

I mainly speak why use redux – persist, if just using the CSR, build redux project, I won’t use redux – pesrist is basically, because we can through localStroge, sessionStorage do persist or session level storage, However, I encountered this problem when developing next. Js. Some common component data cannot be stored, but it is not necessary to call each page. In next. Js, you’ll often see words like Window,localStorage is not defined, for example, header, homeContainer, footer, The header and footer are both required to read background data. When accessing the home page, you can request the data to home. getInitialProps. Then, the pageProps in _app.js can be sent to header,footer and other public components. In this process, an action can be initiated and the data can be sent to the Reducer layer.

5. Glitches in development

If the following warning appears

  chunk styles [mini-css-extract-plugin]
  Conflicting order between:
Copy the code

Install webpack-filter-warnings-plugin for webpack configuration, which can be ignored

  webpack(config, options) {
    config.plugins.push(new FilterWarningsPlugin({ exclude: /mini-css-extract-plugin[^]*Conflicting order between:/, }))
    return config;
  },
Copy the code

The package optimization problem first uses @zeit/ next-bundle-Analyzer to analyze the package structure of the page and then dissolves the corresponding hanging CDN of the hanging CDN. This is only optimization for the project. Some page performance optimization makes specific code modifications according to the specific performance analysis report

  webpack(config, options) {
    config.externals = {
      "antd": "antd".'react': 'React'.'moment': 'moment'.'react-dom': 'ReactDOM',}return config;
  },
Copy the code

The next. Js package file needs to be put on the server, because it is the server boot need to install node on the server install pM2 daemon process, generate logs, easy to troubleshoot some problems later The exposed real port is 8080 mapped to the corresponding domain name and users can have a pleasant access

Upstream nextjs {server 127.0.0.1:3000; keepalive 64; } server { listen 8080; Server_name 10.37.0.113; Location / {proxy_http_version 1.1; proxy_set_header Upgrade$http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_set_header X-Nginx-Proxy true;
      proxy_cache_bypass $http_upgrade;
      proxy_pass http://nextjs; # Reverse proxy
  }
Copy the code

6. Conclusion

Due to some reasons, business code can not be displayed, only the general structure of the display, this time with next, JS development before and after nearly a month, learning a lot, especially to the node end extension, such as the latest next. Js8.1 version, has launched with servesless, now and other construction scheme, learning…

Making address github.com/tanzhiling/…