Next.js 12 적용 후기 - TEAM-ARK/inflearn-clone-front GitHub Wiki

컴파일러 변경으로 인한 refresh, build 시간 감소 비교

이번 next.js 12버전 업데이트에서 Babel 컴파일러에서 SWC(Rust) 컴파일러로 바뀌었다.

refresh, build 시간 비교

  • build time
    • 11버전 : 1분 50초(빌드에 걸리는 총 시간)
    • 12버전 : 1분 38초(빌드에 걸리는 총 시간)
  • refresh time
    • 11버전 : 강의 만들기 -> 강의 정보 : 5.41초
    • 12버전 : 강의 만들기 -> 강의 정보 : 3.16초

Refresh 시간 비교

강의 만들기 페이지 -> 강의 정보 페이지

  • 11버전 : 강의 만들기 -> 강의 정보 : 5.41초
  • 12버전 : 강의 만들기 -> 강의 정보 : 3.16초

캐시때문에 페이지 이동시간을 비교해서 측정했다. 생각보다 유의미한 차이를 보여주었다. next.js는 개발모드일 때 페이지 이동 시 매번 동적으로 페이지를 새로 만드는데 이때 컴파일러가 달라져서 속도가 빨리진 것이 체감이 되었다.

Build 시간 비교

버전 11

버전 12

  • 11버전 : 1분 50초(빌드에 걸리는 총 시간)

  • 12버전 : 1분 38초(빌드에 걸리는 총 시간)

  • 빌드에 포함된 항목

    • 타입체크
    • ESLint 에러 확인
    • 컴파일
    • 정적 페이지 생성

고찰

공식홈페이지나 유튜브로 홍보했던 것 처럼 드라마틱하게 3배 또는 5배까지 빨라지진 않았다. 컴파일이나 정적 페이지 생성에선 빨라진 것 같은데 타입체크나 ESLint 에러 확인 하는 부분은 별 차이가 없는 것 같았다. 시간측정을 손으로 스탑워치를 들고 측정한 것이기 때문에 정확하지 않을 수도 있다.

Next.js middleware

  • 간단하게 테스트
    • course/[id] 에 미들웨어를 만들기
    • id가 1이 아니면 404 화면을 띄우기
      • 404 화면 컴포넌트 필요
      • _middleware.ts 에선 리액트 컴포넌트 문법(jsx or tsx)를 사용할 수 없음
    • 서버쪽 코드라고 생각하면 될 것 같다
      • console.log도 서버(node.js) 터미널에 찍힘
    • 아직은 언제 어떻게 써야할지 지켜봐야겠다
    • 완전히 MVC 패턴처럼 서버에서 코딩하는 느낌이다
  • Next.js 공식 예제 코드
  • 미들웨어에서 redirect를 해당 미들웨어가 포함된 라우터 폴더로 보내면 무한 루프에 빠짐

공식 사이트 에제

auth

import { NextRequest, NextResponse } from 'next/server';
import { setUserCookie } from '@lib/auth'

export function middleware(req: NextRequest) {
  // Add the user token to the response
  return setUserCookie(req, NextResponse.next())
}

json

import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  return new Response(JSON.stringify({ message: 'hello world!' }), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

bot detected

import { botdEdge } from '@lib/botd';
import demoMiddleware from '@lib/demo-middleware';
import { first } from '@lib/utils';
import { NextRequest, NextResponse } from 'next/server';

async function handler(req: NextRequest) {
  // Do light bot detection for all requests excluding
  // all static files but favicon.ico.
  const res = await botdEdge(req, {
    // The request id is excluded for demo purposes because
    // Botd remembers your request id and will always show
    // you the /bot-detected page if you're a bot, and
    // never if you have been identified as a human
    useRequestId: false,
  });
  if (res && res.status !== 200) {
    // Bot detected!
    const rewrite = NextResponse.rewrite('/bot-detected');
    res.headers.forEach((v, k) => rewrite.headers.set(k, v));
    return rewrite;
  }
  return res;
}

// if you are using this example as reference,
// feel free to remove the wrapping here which
// is only here to serve this demo
export const middleware = first(demoMiddleware, handler);

// https://github.com/vercel/examples/tree/main/edge-functions/bot-protection-botd/pages

Next.js <Image />

이번에 next.js의 <Image /> 에서 AVIF 포맷을 지원한다고 해서 Image 태그를 다시 한번 사용해봤다.

Image 태그 사용 후기

// next.config.js
module.exports = {
  images: {
    domains: ['assets.example.com'],
  },
};
  • width와 height을 지정할 때 '80%'를 입력값을 주면 80px로 인식함 : 스타일링이 불편함
    • %를 이해 못 하는 것 같음
  • Image 태그는 거의 사용 안 할 것 같음

참고

⚠️ **GitHub.com Fallback** ⚠️