@aiou/nextjs-rematch2-template

nextjs quick start

Usage no npm install needed!

<script type="module">
  import aiouNextjsRematch2Template from 'https://cdn.skypack.dev/@aiou/nextjs-rematch2-template';
</script>

README

@aiou/nextjs-rematch2-template

nextjs quick start

npm GitHub

For Stater

i am a stater

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

Q&A

  1. pages/api

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

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

  2. proxy

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

  3. tabs route

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

    构造一个公用组件<Common />。在parent/child1

    <Common>
     child1
    </Common>
    

    parent/child2

    <Common>
     child2
    </Common>
    
  4. route based modal - modal和某个路由绑定(或者说通过path控制modal visiable)。react-router实现这种方式官方有个modal gallery的例子。nextjs好像没有办法修改route渲染结构,也就没有办法实现。

    nextjs实现方式官网showcase就是这个方式。但是局限性在于只能在当前父类页面打开modal。例如parent/modalmodal 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>
    
  5. 移动端适配 - https://github.com/JiangWeixian/templates/issues/49

  6. nextjs router transition - https://codesandbox.io/s/0x07m12xl0。使用的是react-spring作为动画lib