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>
react: nextJs koa project basic structure的更多相关文章
- China Brain Project: Basic Neuroscience, Brain Diseases, and Brain-Inspired Computing
日前,中国科学院神经科学研究所.中国科学院脑科学与智能技术卓越创新中心.香港科技大学生命科学部和分子神经科学国家重点实验室.中国科技大学自动化研究所在 Cell 上联合发表了一篇概述论文<Chi ...
- [React Router v4] Create Basic Routes with the React Router v4 BrowserRouter
React Router 4 has several routers built in for different purposes. The primary one you will use for ...
- 前端react+redux+koa写的博客推荐
React-Node搭建的博客 曾经用的php+mysql+js写的博客,现在看来已经很low了,所以用目前最火的react+koa框架重构一下.先上地址吧:目前线上版本http://www.liuw ...
- React与Koa一起打造一个功能丰富的全栈个人博客(业务篇)
前言 豆哥的个人博客又改版了,本版主要技术栈是前台用的React,后台用的Koa.博客改版的初衷是自己可以练练React(公司的项目部分要用React,我也没法啊,再说早晚得学).本文主要介绍博客的业 ...
- Vue: webpack js basic structure
vue webpack所用基础包: nom install vue vue-loader webpack webpack-cli webpack-dev-server vue-template-com ...
- React与Koa一起打造一个仿稀土掘金全栈个人博客(技术篇)
本篇文章将分为前台角度与后台角度来分析我是怎么开发的.前台角度主要资源 react.js ant Design for-editor axios craco-less immutable react- ...
- 1.Basic Structure
配置: rsyslogd 配置通过rsyslog.conf file,典型的在/etc下.默认的, rsyslogd 读取/etc/rsyslog.conf 文件,这个可以通过命令行选项改变 注意 配 ...
- Project Management Process
Project Management ProcessDescription .............................................................. ...
- react问题解决的一些方法
原文链接: https://segmentfault.com/a/1190000007811296?utm_source=tuicool&utm_medium=referral 初学者对Rea ...
随机推荐
- 记录一次MAC连接投影闪屏的问题。
遇到的问题:MAC笔记本连接投影出现闪屏怎么办? 解决办法:尝试过很多种办法,后面发现这个闪屏原因是投影机的refresh rate 默认不支持这么高的.调整到30hz左右即可. 步骤:使用HDMI转 ...
- adb的基本安装和介绍(一)
一,什么是adb? adb全称为Android Debug Bridge,就是起到调试桥的作用.顾名思义,adb就是android sdk 的一个工具 借助adb工具,我们可以管理设备或手机模拟器的状 ...
- 加密解密 Python
常见加密方式和Python实现 1. 前言 我们所说的加密方式,都是对二进制编码的格式进行加密的,对应到Python中,则是我们的Bytes. 所以当我们在Python中进行加密操作的时候,要确保我们 ...
- Mac LaTex中文环境搭建
为了在博客上写公式,折腾了一晚上Mac上的LaTex的环境搭建,本文对步骤进行记录. 系统:Mac OSX 10.10.5 软件准备 1) MacTex 2015 Distribution (Tex的 ...
- 【Jenkins】使用 Jenkins REST API 配合清华大学镜像站更新 Jenkins 插件
自从去年用上了 Jenkins 进行 CI/CD 之后,工作效率高了不少,摸鱼的时间更多了.不过 Jenkins 好是好,但在功夫网的影响下,插件就是经常更新不成功的,就像下面这样子: 查了不少资料, ...
- 想读Spring源码?先从这篇「 极简教程」开始吧...
为什么要阅读源码?这是一个有趣的问题,类似的问题还有,为什么要看书?为什么要爬山? 这也是一个哲学问题,我想每个人都有不同的答案,下面我是对阅读源码好处的一些思考. (PS:也欢迎你在评论区留言补充) ...
- 基于OAuth2.0的token无感知刷新
目前手头的vue项目关于权限一块有一个需求,其实架构师很早就要求我做了,但是由于这个紧急程度不是很高,最近临近项目上线,我才想起,于是赶紧补上这个功能.这个项目是基于OAuth2.0认证,需要在每个请 ...
- mysql搭建主从复制(一主一从,双主双从)
主从复制原理 Mysql 中有一个binlog 二进制日志,这个日志会记录下所有修改了的SQL 语句,从服务器把主服务器上的binlog二进制日志在指定的位置开始复制主服务器所进行修改的语句到从服务器 ...
- php--理解PHP的依赖注入和laravel的服务容器
写在前面 为了了解laravel的服务容器在网上搜了许多文章,其中大多数都有其侧重点,没有很系统的一套东西以供参考,看完之后仍觉似乎少了一根把他们串起来的绳子,近期有幸拜读了陈昊的<Larave ...
- mpvue怎么使用iconfont
原文链接:https://blog.csdn.net/weixin_39818813/article/details/80695750 1.首先去阿里巴巴矢量图标库区把你要图标加到购物车 阿里巴巴矢量 ...