Next.js是什么
Next.js 是一个轻量级的 React 服务端渲染应用框架。
它支持多种渲染方式：客户端渲染、静态页面生成、服务端渲染。
使用Next.js 实现 SSR 是一件很简单的事，我们完全可以不用自己去写webpack等配置，Next.js 都帮我们做好了。
为什么要使用TypeScript
通过静态类型检测可以尽早检测出程序中隐藏的的逻辑错误，对于JavaScript动态的弱类型语言，虽然灵活性高，但是对于初学者来说，如果不熟悉JavaScript内部的语言机制，很容易造成隐藏的事故。但是通过TypeScript的静态类型检测可以规避这些问题，因为其能够约束变量产生的类型。结合IDE编辑器可以推导变量对应的类型以及内部的结构，提高代码的健壮性和可维护性。
他的类型系统能够强化规范编程，TypeScript提供定义接口。在开发大型复杂的应用软件时十分重要，一个系统模块可以抽象的看做一个TypeScript定义的接口。让设计脱离实现，最终体现出一种 IDL（接口定义语言，Interface Define Language），让程序设计回归本质。
为什么要使用Mobx
Mobx基础知识很简单，学习了半小时官方文档和示例代码就搭建了新项目实例；并且Mobx支持面向对象编程，我们可以使用@observable and @observer，以面向对象编程方式使得JavaScript对象具有响应式能力；而Redux最推荐遵循函数式编程，当然Mobx也支持函数式编程；
模版代码少：相对于Redux的各种模版代码，如，actionCreater，reducer，saga／thunk等，Mobx则不需要编写这类模板代码；
创建Next.js项目
npx create-next-app@latest // or yarn create next-app
进入应用，用命令行启动项目 npm run dev。
看到下图，就说明你的项目启动成功啦。
配置 TypeScrip！
安装依赖typescript依赖
npm install typescript @types/react @types/node --save
在根目录下创建tsconfig.json，这是 TypeScript 的配置文件。
//tsconfig.json配置
{
"compilerOptions": {
"experimentalDecorators": true,
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": [
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
把文件名 index.js 改为 index.tsx，新增typescript的类型检测
import React from "react";
import {NextPage} from 'next';
const Home: NextPage = () => {
return (
<div>首页</div>
)
}
export default Home;
这个时候访问 http://localhost:3000/就能看见页面了。
也可直接创建项目的时候配置使用typescript模板
npx create-next-app@latest --ts
// or
yarn create next-app --typescript
配置less！
npm install less less-loader next-with-less --save
在next.config.js配置支持less
const withLess = require("next-with-less");
module.exports = withLess({})
配置完成即可引入less使用。
注意：理论上withLess是一个方法，应该不需要传入空对象即可，但是不传对象报错：Cannot read property 'lessLoaderOptions' of undefined。
安装Ant Design
npm install antd
修改 pages/index.tsx，引入 antd 的按钮组件。
import React from "react";
import {NextPage} from 'next';
import { Button } from 'antd';
const Home: NextPage = () => {
return (
<div>
<Button type="primary">Button</Button>
</div>
)
}
export default Home;
修改 style/globals.css，在文件顶部引入 antd/dist/antd.css。
@import '~antd/dist/antd.css';
现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。
配置Mobx
npm install mobx --save
npm install mobx-react --save
配置.babelrc
npm install @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators --save
根目录下创建.babelrc
{
"presets": [
"next/babel"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": false
}
]
]
}
在根目录创建store文件夹，在文件夹创建index.ts文件
import { action, makeObservable, observable } from 'mobx'
//声明Store里属性类型
export interface StoreType {
count: number,
addCount: Function,
reduceCount: Function
}
class Store<StoreType> {
constructor() {
makeObservable(this)
}
@observable count: number = 0
@action addCount():void {
this.count++
}
@action reduceCount():void {
this.count--
}
}
export default new Store()
定义了响应式变量count, 还有2个行为方法性 触发addCount方法变量count加1，触发reduceCount方法变量count减1
在App组件中引入
import '../styles/globals.less'
import { Provider } from 'mobx-react'
import store from '../store'
export default function App({ Component, pageProps }) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
)
}
编译时错误代码：
“类型“Readonly<{}> & Readonly<{ children?: ReactNode; }>”上不存在属性“store”。ts(2339)” index.tsx中并没有对App组件传递属性。这是因为，App组件会一直去Props中找这个值，而没有去store中找。类似下面的
都是同一个问题。
这样可以解决上面的问题，如下：
import { Button } from 'antd';
import { inject, observer } from 'mobx-react'
import React from 'react';
import { StoreType } from '../store'
export interface Props {
store: StoreType // 这里比较关键 ？表示不或缺，如果没有就会报错。
}
@inject('store')
@observer
export default class Home extends React.Component<Props> {
render() {
return (
<div className={styles.container}>
<main className={styles.main}>
<h1 className={styles.data-data-data-title}>
Welcome to <a href="https://nextjs.org" target="_blank" rel="external nofollow" >Next.js!</a>
</h1>
<div className={styles.description}>
<p>sore数据:{this.props.store.count}</p>
<p><Button type="primary" onClick={() => this.props.store.addCount()}>新增</Button></p>
<p><Button type="primary" onClick={() => this.props.store.reduceCount()}>减少</Button></p>
</div>
</main>
</div>
)
}
}
非常简单的小示例：
到这里其实以及完成对Nextjs下TypeScript结合antd和Mobx的配置。
有兴趣可以参阅项目模板：next-template: next12集成Ant Design+mobx6+typescript模板