react: nextJs koa project basic structure

1、init nextJs project

npm init

npm install react react-dom next

config script in package.json

"dev": "next""start": "next start" "build": "next build"

npm run dev

result: 404 page not found

2、index.js entry file

export default () => <span>hello react next<span>

result: hello react next

3、koa server

npm install koa koa-router

const Koa = require('koa');
const next = require('next');const dev = process.env.NODE_ENV !== "production";
//创建next app处于开发状态
const app = next({ dev });const handle = app.getRequestHandler();//页面加载编译完成后在处理请求
app.prepare().then(() => {const server = new Koa();//中间件的使用server.use(async (context, next) => {//request,response,req,res;await next() 执行下一个中间件
        await handle(context.req, context.res);context.respond = false;});server.listen(3000, () => {console.log("koa server listening on 3000")})
})

update script

"dev": "node server.js"

4、next with antd and css

npm install antd @zeit/next-css babel-plugin-import

for css config next.config.js

const withCss = require('@zeit/next-css');if (typeof require !== 'undefined') {require.extensions['.css'] = file => {}
}module.exports = withCss({})

for antd config .babelrc

{"presets": ["next/babel"],"plugins": [["import",{"libraryName": "antd","style": "css"}]]
}

test valid

app.js

import App from "next/app";import "antd/dist/antd.css";export default App

update index.js

import { Button } from "antd";
export default () => <Button type="primary">hello world</Button>

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/11028788.html

react: nextJs koa project basic structure相关推荐

IDEA的Project与Structure依赖jar包的方式
IDEA的Project与Structure依赖jar包的方式 Project: 1.创建Project后,创建package,命名为lib,添加对应的jar包: 2-1.方法一:鼠标移到lib,右键 ...
从零搭建一个基于React+Nextjs的SSR网站(四)：如何搭建服务器并部署Nextjs项目
个人博客源码:https://github.com/shaotianyu/blog-front PS: 如果你有疑惑,可以给我留言,咱们一起解决它. 从零搭建一个基于React+Nextjs的SSR网 ...
Yocto Project - basic - 01 - Quick Start
Yocto 是一个被广泛使用的操作系统,本节开始介绍: 文章的内容来自于Yocto的官方介绍文档. 1 简介 The Yocto Project is an open-source collabora ...
React与Koa一起打造一个仿稀土掘金全栈个人博客（技术篇）
前言我的个人博客样式布局是仿的稀土掘金 ,个人博客线上网址为https://www.maomin.club/ ,也可以百度搜索前端历劫之路 .为了浏览体验,可以用PC浏览器浏览. 本篇文章将分为前台 ...
react引入多个图片_重新引入React：v16之后的每个React更新都已揭开神秘面纱。
react引入多个图片 In this article (and accompanying book), unlike any you may have come across before, I w ...
如何使用 React 创建一个作品集网站
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
gatsby_与Gatsby一起使用React Context API
gatsby I'm a bit late to the party using the new React Context API, I did get to use it the other da ...
react中使用构建缓存_使用React构建Tesla的电池范围计算器（第1部分）
react中使用构建缓存 by Matthew Choi 由Matthew Choi 使用React构建Tesla的电池范围计算器(第1部分) (Building Tesla's Battery Ra ...

react: nextJs koa project basic structure

react: nextJs koa project basic structure相关推荐

最新文章

热门文章