[ next| 青训营笔记]这是我参与「第五届青训营」伴学笔记创作活动的第 3 天路由跳转 netx/link跳转

这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

路由跳转

netx/link跳转

import Link from 'next/link';

<Link href={item.link} key={index}>
    <div className={styles.card}>
        <h2>{item.label} &rarr;</h2>
        <p>{item.info}</p>
    </div>
</Link>

useRouter跳转

除了这些外，还可以使用原生方法跳转，不过原生的方法不会对Diff比对渲染，性能上Nextjs提供的路由跳转会更好。

header的修改

<Head>
        <title>{`A Demo for 《SSR 实战：官网开发指南》(${isMobile ? '移动端' : 'pc端'})`}</title>
        <meta name="description" content={`A Demo for 《SSR 实战：官网开发指南》(${isMobile ? '移动端' : 'pc端'})`} />
        <meta name="viewport" content="user-scalable=no" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

可以修改TDK。

多媒体适配 ---CSS适配

// 极小分辨率移动端设备
@mixin media-mini-mobile {
  @media screen and (max-width: 25.875rem) {
    @content;
  }
}

// 介于极小分辨率和正常分辨率之间的移动端设备
@mixin media-between-mini-and-normal-mobile {
  @media screen and (min-width: 25.876rem) and (max-width: 47.9375rem) {
    @content;
  }
}

// 移动端设备
@mixin media-mobile {
  @media screen and (max-width: 47.9375rem) {
    @content;
  }
}

// ipad
@mixin media-ipad {
  @media screen and (min-width: 47.9375rem) and (max-width: 75rem) {
    @content;
  }
}

使用rem像素单位，固定适配单位xfontsize大小。

大图优化 - webp

export const getIsSupportWebp = (context: AppContext) => {
  const { headers = {} } = context.ctx.req || {};
  return headers.accept?.includes("image/webp");
};

webq体积更小，但解析时间更长。并不是所有设备都兼容，需要用png图片兜底。

BFF层开发

const getArticleInfoData = (req: NextApiRequest, res: NextApiResponse<IArticleProps>): void => {
  const { articleId } = req.query;
  axios.get(`${CMSDOMAIN}/api/article-infos/${articleId}`).then(result => {
    const data = result.data || {};
    res.status(200).json(data);
  });
};

和Express等开发类似，区别式没有参数可以直接区别请求类型。

Strapi - headless CMS

一个接口的生成有以下几个过程：

content-type builder 编辑结构体
content manager 配置数据源，并且发布。
setting roles 选择对应角色并勾选要发布的接口类型。
如果涉及嵌套，在接口后加上populate=deep参数，没安装的话就得加参数pupulate=* 但只能嵌套一层。