整体结构

点击查看【figma】

知识大纲

Page

Static Generation

  1. function Blog({ posts }) {
  2.   // Render posts...
  3. }
  5. // This function gets called at build time
  6. export async function getStaticProps() {
  7.   // Call an external API endpoint to get posts
  8.   const res = await fetch('https://.../posts')
  9.   const posts = await res.json()
  11.   // By returning { props: { posts } }, the Blog component
  12.   // will receive `posts` as a prop at build time
  13.   return {
  14.     props: {
  15.       posts,
  16.     },
  17.   }
  18. }
  20. export default Blog

推荐使用场景：

  • Marketing pages
  • Blog posts and portfolios
  • E-commerce product listings
  • Help and documentation
  • …

SSR

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

推荐使用场景：

The HTML is generated on each request. To make a page use Server-side Rendering, export getServerSideProps. Because Server-side Rendering results in slower performance than Static Generation, use this only if absolutely necessary.

CSR

  • Ajax 补充，对 SG 模式有很好的增强效果，至少保障第一屏是极速的 👍
  • 推荐使用 swr 库来做数据 fetching from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.)

关键 API

  • getStaticPaths：You should use getStaticPaths if you’re statically pre-rendering pages that use dynamic routes.
  • getServerSideProps：Next.js will pre-render this page on each request using the data returned by getServerSideProps.
  • getStaticProps: (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

Play with CSS

  • 支持 CSS 直接调用（css-variables）
  • 支持 SCSS 等预处理器
  • 支持 CSS in JS 模式

很强 👍

Image

内置 Image 组件。

…

:::info ℹ️ 整体说来，有 Node.js 服务端简单 App 开发经验和 React 经验的人来说，上手及其简单 … 所以这里就不罗列了，我把整体的结构使用 FigJam 梳理了一下，作为开速参考的机制。 :::

:::success 🎉 不得不说，Next.js 极大降低了，入门级别网站的开发门槛，真正让市场上偏向内容和展示型的站点有了很多的机会，🐂 🍺！ :::

:::info 💎 甚至觉得，Next.js 都简单得来没有什么 Typescript 用武之地，这或许就是真正的工程和研发体验做到极致之后给人的感觉了吧！ :::

Ref