react: nextJs koa project basic structure

吉祥鸟一雪钦 發表於 2019-6-15 20:46:00

1、init nextJs project
npm init
npm install react react-dom next
config script in package.json
<div class="cnblogs_code">
<pre>"dev": "next"

"start": "next start"

"build": "next build"</pre>
</div>
npm run dev
result: 404 page not found
2、index.js entry file
<div class="cnblogs_code">
<pre>export default () => hello react next</pre>
</div>
result:  hello react next
3、koa server
npm install  koa koa-router
<div class="cnblogs_code">
<pre>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")
})
})</pre>
</div>
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
<div class="cnblogs_code">
<pre>const withCss = require('@zeit/next-css');

if (typeof require !== 'undefined') {
require.extensions['.css'] = file => {}
}

module.exports = withCss({})</pre>
</div>
for antd config .babelrc
<div class="cnblogs_code">
<pre>{
"presets": ["next/babel"],
"plugins": [
 [
 "import",
 {
 "libraryName": "antd",
 "style": "css"
 }
 ]
]
}</pre>
</div>
test valid 
app.js
<div class="cnblogs_code">
<pre>import App from "next/app";

import "antd/dist/antd.css";

export default App</pre>
</div>
update index.js
<div class="cnblogs_code">
<pre>import { Button } from "antd";
export default () => <Button type="primary">hello world</Button></pre>
</div>
  
来源：https://www.cnblogs.com/Nyan-Workflow-FC/p/11028788.html

頁: [1]

琼殿技术论坛's Archiver

react: nextJs koa project basic structure