next.js开发总结

如何区分客户端、服务端组件

服务端组件：默认都是服务端组件
客户端组件：事件监听；用到浏览器api的，如window对象；用到styled-components的；用到redux的等

组件嵌套

决不允许将服务端组件嵌入到客户端组件中

如果想使用上述图中的特性，可以使用客户端组件单独封装它们，然后再把客户端组件挨个嵌套进来

使用tpyescript注意事项

最好集中定义type，避免重名

比如blog页用的Data定义，到了电影列表那里还是用Data定义 – 这种编译时会通过但是在运行途中就容易出事故，导致服务挂掉

interface data {
	title:string;
	...
}

interface的定义应该是全局唯一的，且语意化明确的，eg上面的data即可定义为BlogData, MovieData

http请求

客户端用axios
服务端用next.js自带的fetch api，返回值建议Promise<T>

关于页面自适应

推荐使用tailwind的flex布局，卡住下面3个档位就可

sx: 移动端
sm
md

分页组件

推荐使用mui

layout是可以继承的

内层的layout会自动继承内层的layout

错误处理

首先我们来进行错误分析：

客户端行为引发的错误：访问不存在的path，会自动跳转404页面
服务端错误:
- 服务端内部错误
- 服务端本身没错，只是没有返回预期的结果，导致接口对不上

访问api路径下的path时，如果页面不存在，会自动跳转到系统自定义的404页面

如果你嫌系统的404页面简单丑陋，可以自己定制，方法是在app目录下创建not-found.tsx:

import Link from 'next/link'
import React, { memo } from 'react'

const NotFound = memo(() => {
  return (
    <div className='w-full h-[100vh] py-[48vh] text-center text-white bg-[#161616]'>
        <h3>请求资源不存在</h3>
        <div className='mt-2'>
            点击<Link href='/' className='text-[blue] ml-1'>回到首页</Link>
        </div>
    </div>
  )
})

export default NotFound

以上只能handle客户端行为引发的错误，但是服务端的错误怎么处理呢？

我们可以利用nextjs的redirectapi，将用户引导至提前定义好的错误页，demo如下：

async function getBlogByUUID(uuid: string): Promise<BlogDetail> {
  const res = await blogApi.getBlogByUUID(uuid)
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  // Recommendation: handle errors
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    // throw new Error('Failed to fetch data')
    //服务端没有返回指定的接口
     redirect("/page404")
  }

  const data = await res.json()
  return data.data
}

http关于baseUrl的设置

1，客户端组件不用加域名发起的请求是可以被代理的，如后端地址是http://127.0.0.1:44444

2, 服务端组件必需要加完整域名，需要注意的是服务端组件发起的请求其实是运行在客户端的，比如你配置的后端baseUrl地址是http://127.0.0.1:44444，那么如果本地没有这个服务的话，它是会报错的。

请求是不可以被代理的：因为“服务端”的代码不存在跨域行为，nextjs在把静态页面返回给浏览器之前就已经完成了请求；但是这个请求却发生在客户端，