패스트캠퍼스 챌린지 29일차 (Next.js 실제2)

22.2.21 (월) +29days

Authentication

https://nextjs.org/docs/authentication

인증 패턴

• 클라이언트 사이드에서 인증: 로딩 상태 있음
• 서버 사이드에서 인증: 인증될때까지 block
• iron / next-auth / passport.js

next-auth example

https://github.com/nextauthjs/next-auth-example

Testing

Cypress

Cypress is a test runner used for End-to-End (E2E) and Integration Testing.

Playwright

Playwright is a testing framework that lets you automate Chromium, Firefox, and WebKit with a single API. You can use it to write End-to-End (E2E) and Integration tests across all platforms.

Jest and React Testing Library

Jest and React Testing Library are frequently used together for Unit Testing. There are three ways you can start using Jest within your Next.js application:

1. Using one of our quickstart examples
2. With the Next.js Rust Compiler
3. With Babel

The following sections will go through how you can set up Jest with each of these options:

Preview Mode

https://nextjs.org/docs/advanced-features/preview-mode

Headless(화면X) CMS(Contents Management System) 컨텐츠는 만들 때, SSG 임에도 build time이 아닌 request time에 초안의 상태를 미리 볼 수 있는 기능

/api/preview

res.setPreviewData({});

token으로 보안 강화

매개변수를 통해 원하는 데이터를 가져와서 getStaticProps에 전달 가능

context.preview / context.prveiewData

Dynamic Import

https://nextjs.org/docs/advanced-features/dynamic-import

Next.js supports ES2020 dynamic import() for JavaScript. With it you can import JavaScript modules dynamically and work with them. They also work with SSR.

In the following example, we implement fuzzy search using fuse.js and only load the module dynamically in the browser after the user types in the search input:

import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee']

export default function Page() {
  const [results, setResults] = useState()

  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        onChange={async (e) => {
          const { value } = e.currentTarget
          // Dynamically load fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)

          setResults(fuse.search(value))
        }}
      />
      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}

js 파일을 dynamic 하게 import 하는 기능

react components도 가능하다.

loading / ssr / suspense

Automatic Static Optimization

https://nextjs.org/docs/advanced-features/automatic-static-optimization

알아서 최적화 해준다.

npm run build 해보면 statically optimized 된 페이지는 html

getSeverSideProps가 있으면 js로 만들어진다.

이 때문에 query 값이 hydration 이전에는 읽을 수 없다.

Static HTML Export

https://nextjs.org/docs/advanced-features/static-html-export

next export

standalone without Node.js server

서포트 안하는 기능들 제거 혹은 대체 해야됨

(Image의 경우 custom or solution)

Absolute Imports and Module path aliases

https://nextjs.org/docs/advanced-features/module-path-aliases

jsconfig.json 등을 활용해서 모듈 경로의 별칭 설정

정리

인증 ⇒ 클라이언트 사이드 / 서버 사이드

Testing ⇒ E2E Testing / Unit Testing

Preview / Dynamic Import ⇒ Headless CMS 초안 / 필요할 때 import

기타 ⇒ Static Optimizatio / export / path alias

 

 

 

 

22.2.21 +29days

 

 

 

 

https://bit.ly/37BpXiC

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