Create the NextJS project

Next. Js project creation – manual creation

1.npm init

2.yarn add react react-dom next    //npm install react react-dom next

All next. Js pages (without HTML and with JSX syntax) are placed in the Pages folder and a series of routes are generated based on the names of the files in that directory

3. Add script commands dev,build,start to package.json

4.yarn dev   //npm run dev

Next. Js project creation two – create-next-app

1.npm i -g create-next-app

2.npx create-next-app next-create    //yarn create next-app

3.yarn dev    //npm run dev

Next. Js is used as Koa middleware

Server functions:

1. Process HTTP requests and return content based on the request data (NextJS only handles page requests)

2. Locate servers based on hosts such as domain names

For NextJS

Nextjs comes with its own server and only handles SSR rendering

Nextjs cannot handle the server side:

1. Data interface

2. Connect to the database

3. The state of the session

Why Koa

Koa is a very popular lightweight NodeJS server framework

The project is relatively lightweight and does not require a lot of integrated functionality

Very easy to expand, programming mode is very consistent with JS features

Install Koa dependencies

yarn add koa
yarn add koa-router
Copy the code

How to use Koa

1. The characteristics of koa

Lightweight: What functionality does it not encapsulate

It organizes the flow of HTTP requests from entry to completion, making it easy to combine many functions, namely middleware functions

2.api

app.use

CTX object

Request Response ReQ RES relationship

Ctx. request CTx. Response object is essentially the encapsulation of HTTP REQ and RES objects of NodeJS

3. Write a KOA middleware

When KOA receives the request from the browser, it calls the middleware one by one, in the order of the middleware (methods) passed in by Server.use, and the middleware does something about the content of our request and the return of the request during processing

Router can easily define router.routes() for a path, without using nextjs

Effect, unprocessed path 404

To be continued