README

@aiou/nextjs-rematch2-template

nextjs quick start

For Stater

i am a stater

在api route和server之间是两个服务器的问题，所以也就没有CORS问题。同样发生在getInitialProps在服务端执行的时候发生的情况。可以把api route理解为约定式的，简化版本的express sever。nextjs也提供api route之外的custom-route的方式

Q&A

pages/api

getInitialProps中请求baseUrl为''（在开发模式下就是localhost:port）的时候会请求到pages/api (无论是通过<Link />打开还是通过url刷新)。如果我们需要向backend api去请求一些数据的话，那么对于 请求baseUrl不为''（在开发模式下不是localhost:port） 这些接口就请求到真正的服务端。

例如，假设前端页面是www.a.com。baseUrl为''情况下，请求地址为a.com/xxx，无论getInitialProps是在server执行还是前端执行，此时不会出现cors问题；如果baseUrl不为''情况下，那么就会请求真正的服务器，而不是api route构建的简单服务器，这种情况下就会可能出现cors问题。（或者说cors是需要而且解决的问题）
proxy

如果在server.js启用了代理。那么就不会将请求指向pages/api
tabs route

在react一个很简单的实现为nested route，也就是在/parent/child1和/parent/child2路由下，有一部分组件是固定不变的，只有部分child route在变化。但是nestjs中好像没有办法通过相同的方式实现。这种需求的普遍做法为

构造一个公用组件<Common />。在parent/child1为
```
<Common>
 child1
</Common>
```
在parent/child2为
```
<Common>
 child2
</Common>
```
route based modal - modal和某个路由绑定（或者说通过path控制modal visiable）。react-router实现这种方式官方有个modal gallery的例子。nextjs好像没有办法修改route渲染结构，也就没有办法实现。

nextjs实现方式官网showcase就是这个方式。但是局限性在于只能在当前父类页面打开modal。例如parent/modal是modal page。那么：
- 在parent下点击parent/modal可以实现打开modal同时，modal背后显示的是parent page
- 在其余页面下点击parent/modal。那么会跳转到parent页面，并打开parent/modal
但是react-router官网例子能够做到更多，例如在a页面下点击parent/modal。那么会跳转到parent页面，并打开parent/modal。会直接打开parent/modal，其背后显示的还是a页面。

那么如何在nextjs下实现这个功能？在官网不支持routes config情况下，首先modal page是全局的组件，即/下进行控制。可以选择写在_app.tsx下。(假设parent/modal显示为modal逻辑为通过<Link />点击打开的是modal，链接直接复制到url里面的为普通页面)

这部分逻辑没有实践过.. parent/modal - 在state = modal下，parent/modal.tsx组件不显示。显示的为_app下对应的parent/modal.tsx组件。
```
<Modal>xx</Modal>
```
移动端适配 - https://github.com/JiangWeixian/templates/issues/49
nextjs router transition - https://codesandbox.io/s/0x07m12xl0。使用的是react-spring作为动画lib

Usage no npm install needed!

README

@aiou/nextjs-rematch2-template

For Stater

Q&A