Typescript+ ant-Design + Redux+ next.js builds server-side rendering frameworks

Create and initialize the project

I won’t say much here, I believe you are very skilled

mkdir TAN
cd TAN
npm init -y
Copy the code

Configuration Typescript

1. Install the Typescript

npm install typescript --save
Copy the code

@zeit/ Next-typescript is no longer needed because Next-.js has built-in support for typescript

2. Create.babelrc in the root directory and type the following code

{
  "presets": [
    "next/babel"]}Copy the code

3. Create tsconfig.json in the root directory and enter the following code

{
  "compileOnSave": false."compilerOptions": {
    "strict": true."target": "esnext"."module": "esnext"."jsx": "preserve"."allowJs": true."moduleResolution": "node"."allowSyntheticDefaultImports": true."experimentalDecorators": true."noUnusedLocals": true."noUnusedParameters": true."removeComments": false."preserveConstEnums": true."sourceMap": true."skipLibCheck": true."baseUrl": "."."typeRoots": [
      "./node_modules/@types/",]."lib": [
      "dom"."es2015"."es2016"]},"exclude": ["node_modules"]}Copy the code

In the above configuration, please note: use “JSX” : “preserve” instead of React-native, since next.js supported.jsx file extensions after 5.0.0, which previously only recognized.js files.

4. Tslint. json was introduced to help us standardize the style of writing ts with some constraints.

{
    "extends": ["tslint:latest"]."rules": {
      "arrow-parens": false."interface-name": [true."never-prefix"]."no-object-literal-type-assertion": false."no-submodule-imports": false."semicolon": [true."never"]."trailing-comma": [true, {"multiline": "nerver"."singleline": "never"}}}]Copy the code

Change page/index.js to index.tsx and make the following changes

interface Person {
    name: String;
}
const Rashomon: Person = {
    name: 'rashomon',}export default() = ><div>{Rashomon.name}!</div>
Copy the code

4. Create server.js in the root directory. The server.js file can be used as the entry file to start the user-defined service.

const next = require('next');
const { createServer } = require('http');
const { parse } = require('url')
constdev = process.env.NODE_ENV ! = ='production';
const port = parseInt(process.env.PORT, 10) | |3000;
const app = next({dev})
const handle = app.getRequestHandler()

app.prepare().then((a)= > {
    createServer((req, res) = > {
      const parsedUrl = parse(req.url, true)
      handle(req, res, parsedUrl)
    }).listen(port, err => {
        console.log(err, port)
      if (err) throw err
      console.log(`> Ready on http://localhost:${port}`)})})Copy the code

Change package.json startup command “dev”: “Nodeserver. js”, run NPM run dev, you will see a line error: It looks like you’re trying to use TypeScript but do not have the required package(s) installed. This means trying to use TypeScript but not having the required packages installed. We simply run the following command

npm install --save-dev @types/node
Copy the code

Run the command again to open http://localhost:3000 to see our page.

The introduction of Less

1. Install less, @zeit/next-less dependencies

npm install less @zeit/next-less null-loader --save 
Copy the code

2. Create next. Config. js in the root directory and type the following code

const withLess = require('@zeit/next-less');

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,},webpack: (config, { isServer }) = > {
    if (isServer) {
      const antStyles = /antd\/.*? \/style.*? /
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) = > {
          if (request.match(antStyles)) return callback()
          if (typeof origExternals[0= = ='function') {
            origExternals[0](context, request, callback)
          } else{ callback() } }, ... (typeof origExternals[0= = ='function' ? [] : origExternals),
      ]

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader'})},return config
  },
})
Copy the code

Create a new index.less file in the page folder and add antD to the index.tsx file.

@import '~antd/dist/antd.less';
Copy the code

Make the following changes in index. TSX

import {Button} from 'antd';
import './index.less'
interface Person {
    name: String;
}
const Rashomon: Person = {
    name: 'rashomon',}export default() = ><Button type='primary'>{Rashomon.name}!</Button>
Copy the code

4. To use a custom ANTD theme, for example, let’s change the theme color of ANTD and install less-vars-to-js

npm install less-vars-to-js --save
Copy the code

Create the assets file in the root directory and create antd-custom.less

@primary-color: #08979c;
Copy the code

The style file is read in next.config.js, the contents of the less file are received as a string through less-vars-to-js, and an object containing all the variables is returned. Next.config.js adds the following:

.// Add content
const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8'))... lessLoaderOptions: {javascriptEnabled: true.modifyVars: themeVariables,},...Copy the code

Run the startup command, and the page is as follows:

Custom error handling

404 and 500 errors are handled by the error.js component on both the client and server sides. If you want to override it, create _error.js in the pages file so that the _error page is accessed when the user accesses the wrong route

import React from 'react'
export default class Error extends React.Component {
  static getInitialProps({ res, err }) {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
    return { statusCode }
  }
  render() {
    return (
      <p>
        {this.props.statusCode
          ? `An error ${this.props.statusCode} occurred on server`
          : 'An error occurred on client'}
      </p>
    )
  }
}
Copy the code