手把手教你从零创建nextjs+Koa项目

·  阅读 2970

一、创建nextjs项目

next.js项目创建之一——手动创建

1.npm init

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

3.新建pages文件夹 所有next.js所有页面(无html,书写JSX语法)均放在pages文件夹下,会根据该目录下面文件的名称来生成一系列的路由

3.package.json中加入脚本命令:dev,build,start

4.yarn dev   //npm run dev

next.js项目创建之二——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作为Koa中间件使用

服务器作用:

1.处理HTTP请求,并根据请求数据返回相应内容(nextjs只处理页面请求)

2.根据域名之类的HOST来定位服务器

对于nextjs来说

nextjs自身带有服务器,只处理ssr渲染

nextjs无法处理服务端:

1.数据接口

2.数据库连接

3.session状态

为什么Koa

Koa是一个非常流行的轻量级nodejs服务端框架

项目相对轻量,并不需要很多集成的功能

非常易于扩展,编程模式非常符合JS特性

安装Koa依赖

yarn add koa
yarn add koa-router
复制代码

Koa使用方式介绍

1.koa的特点

轻量:本身不封装什么功能

组织了整个HTTP请求从进入到完成应该走的流向,可以方便的把很多功能组合起来,即中间件的功能

2.api

app.use

ctx对象

request response req res的关系

image.pngimage.png

ctx.request  ctx.response对象本质是对nodejs的http的req,res对象的封装

3.写一个koa中间件

koa接收到发自浏览器的请求之后,会按照server.use传入的中间件(方法)顺序,一个一个按顺序调用中间件,这些中间件在处理过程当中对我们请求的内容和请求的返回来进行一些操作

image.png

image.png

router可以方便的定义对应的方法下面对应的某个路径具体的处理函数router.routes(),未使用nextjs

image.png

效果,未处理路径为404

image.png

未完待续~

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改