패스트캠퍼스 챌린지 25일차 (Next.js 심화1)

22.2.17 (목) +25days

Next.js는 프레임워크다.

다양한 도구들의 모음이다.

따라서 API가 꽤나 많다.

다 알 필요는 없지만, 일반적인 기능은 모두 살펴보고, 심화 기능들은 읽어라도 보자.

 

공식문서로 보는 Pages

https://nextjs.org/docs/basic-features/pages

Basic Features: Pages | Next.js

 

Pages

In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.

Pages with Dynamic Routes

Next.js supports pages with dynamic routes. For example, if you create a file called pages/posts/[id].js, then it will be accessible at posts/1, posts/2, etc.

Pre-renderring

Two forms of Pre-rendering

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

• Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
• Server-side Rendering: The HTML is generated on each request.

Static Generation (Recommended)

Server-side Rendering

 

Data Fetching

https://nextjs.org/docs/basic-features/data-fetching/overview

build time / each request / client side

getStaticProps

https://nextjs.org/docs/api-reference/data-fetching/get-static-props

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Incremental Static Regeneration (ISR)

Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// the path has not been generated.
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: blocking } will server-render pages
  // on-demand if the path doesn't exist.
  return { paths, fallback: 'blocking' }
}

export default Blog

getStaticPaths

getStaticPaths return values

인자 context

params

return

props / revalidate(ISR로) / notFount: true (fallback: false에선 무의미)

fallback: ‘blocking’

getServerSideProps

인자 contenxt

params / req / res / query

request마다 동작하기 때문에 req.cookies 가능하다

 

---

Build-In CSS Support

https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of [import]beyond JavaScript.

Adding Component-Level CSS

Sass Support

CSS-in-JS

 

Next.js 심화1 정리

Pages ⇒ Pre-rendering / Dynamic routes

getStaticProps ⇒ revalidate(ISR) / redirect / notFound

getStaticPaths / fallback: ‘blocking’

getServerSideProps / req.cookies

 

 

 

 

22.2.17 +25days

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다