Next.js | 青训营笔记

这是我参与「第五届青训营」笔记创作活动的的第7天 Next.js类似一个框架 包含路由、优化、SSR等功能 入手Next.js 先创建项目

创建项目

create-next-app demo

路由

采用名字约定路由

• pages/index.js 对应 /
• pages/xxx/first.js 对应 /xxx/first

使用 Link 组件来做路由跳转

function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

(需要跳转到外链的时候 使用 <a> 标签)

静态资源

Next.js 提供了 Image 组件来替代 img。

Image 组件的好处就是可以提高网页加载图片的性能，可以自动按需加载，当图片进入视图时再加载图片。

除了相对路径引入，还可以将图片放在 public/images/ 下，然后用 “绝对路径” 引入

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/profile.jpg"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

CSS

很像react 使用 CSS module(命名为x.module.css)

预渲染

三种渲染方式：

CSR

客户端渲染其实就是我们经常看到的前后端分离的场景了：只提供一个 html，拿到 <script> 的 JS 再去渲染页面。

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetch)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

由于需要等加载到 JS 再渲染页面，所以这种渲染方式的有以下缺点： SEO 不友好 白屏时间较长

聪明的前端程序员就想：当访问 URL 的时候，我直接把数据都放到 HTML 上，那爬虫就可以直接拿到页面的信息，解决 SEO 的问题了，同样的不需要等 JS 加载完再发 Ajax 获取数据了，基础数据优先展示，也就能解决白屏时间过长的问题了。

所以，预渲染说的就是 SSG 和 SSR。

SSG

Static Generation 会在 build time 的 production 时候直接将数据写在 HTML 上，所以一般来说这些数据都是以静态、固定为主。

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData
    }
  }
}

将 getStaticProps 这个函数 export 出来，里面则为 build time 时获取数据的逻辑。

SSR

通常情况下，我们很少使用静态的数据，一般以动态数据为主，不可能每次数据更新了又要打包一遍。所以就有了 Server-side Rendring。

Server-side Rendering 则在每次 请求这个 URL 的时候，都会执行一次数据获取并生成 HTML 返回给前端。

和 Static Generation 类似，Server-side Rendering 同样有一个对应的需要 export 出一个 getServerSideProps 函数。

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

Bye