Next.js 实战项目-中 | 青训营笔记

realian
132 阅读2分钟

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

上篇笔记回顾了CSR, SSR, SSG的基本概念， 以及什么是 Next.js？

本篇笔记让我们一起来学习nextjs的实战部分，学习如何用nextjs做一个完整的demo

03. Next.js 客户端开发

Demo仓库地址

CMS仓库地址：github.com/czm12904337…

Demo仓库地址：github.com/czm12904337…

nextjs初始化

bash

npx create-next-app@latest --typescript

目录

image.png

  • next-env.d.ts：确保TypeScript编译器选择Next.js类型，可以放到.gitignore中，不需要变更

  • next.config.js：nextjs的配置，我们可以补充webpack的一些配置进行

/next.config.js
const path = require("path");

module.exports = {
    reactstrictMode:true,
    sWcMinify:true,
    webpack:(config)=>{
        config.resolve.alias =
            ...config.resolve.alias,
            "@"path.resolve(dirname),
        };
        return config;
    },
};

比如说补充一些别名reslove

数据注入:三种方式

我们可以使用getServerSideProps、getStaticProps、getInitialProps、客户端注入进行数据注入

getInitialProps

在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染路由跳转使用客户瑞路由意味着如果使用router跳转当前页，会在客户端执行这部分逻辑

getServerSideProps

SSR,与getlnitialProps不同的是即使使用router跳转当前页，也只会在服务端执行这部分逻辑

getStaticProps

SSG,在服务器端构建时执行，如果涉及动态路由（带参数），需要使用getStaticPaths配置所有可能的参数情况

CSS Modules

Next.js支持使用文件命名约定的CSS模块。[name].module.css

文件式路由

image.png

预定义路由优先级更高，预定义路由能直接匹配的路由就不会分发给下面的动态路由

Next.js有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到pages目录中时，它会自动作为一个路径可用

BFF层的文件式路由

image.png

BFF,作为服务器构建包，不影响客户端构建bundle体积。

相同的router生成方式，不过是作为API层访问，而不是page。

image.png

image.png

路由跳转

next/link 跳转

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

userRouter跳转

import {useRouter} from 'next/router';
function ActiveLink({children,href}){
    const router = useRouter()
const style = {
    marginRight:10,
    color:router.asPath === href?'red':'black';
}
const handleClick = (e)=>{
    e.preventDeafult()
    router.push(href)
}
return(
    <a href = {href} onClick = {handleClick} style = {style}>
    {children}
    </a>
)
}

除了这些，还可以使用原生方法跳转，不过原生的方法不会进行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（title description keywords）

多媒体适配----CSS适配

image.png

image.png

多媒体适配----JS适配

image.png

大图优化-webp

当网速较慢大图片加载慢的时候。我们可以使用webp格式来压缩图片体积。 我们可以使用png to webp网站来转换格式。

但是webp存在兼容性问题，以下这种情况才支持webp格式

image.png

因此我们可以使用一下代码判断其兼容性

export const getIsSupportWebp = (context: AppContext) => {
  const { headers = {} } = context.ctx.req || {};
  return headers.accept?.includes("image/webp");
};
avatar
文章
阅读
粉丝