Next.js 12 적용 후기 - TEAM-ARK/inflearn-clone-front GitHub Wiki
이번 next.js 12버전 업데이트에서 Babel 컴파일러에서 SWC(Rust) 컴파일러로 바뀌었다.
- build time
- 11버전 : 1분 50초(빌드에 걸리는 총 시간)
- 12버전 : 1분 38초(빌드에 걸리는 총 시간)
- refresh time
- 11버전 : 강의 만들기 -> 강의 정보 : 5.41초
- 12버전 : 강의 만들기 -> 강의 정보 : 3.16초
강의 만들기 페이지 -> 강의 정보 페이지
- 11버전 : 강의 만들기 -> 강의 정보 : 5.41초
- 12버전 : 강의 만들기 -> 강의 정보 : 3.16초
캐시때문에 페이지 이동시간을 비교해서 측정했다. 생각보다 유의미한 차이를 보여주었다. next.js는 개발모드일 때 페이지 이동 시 매번 동적으로 페이지를 새로 만드는데 이때 컴파일러가 달라져서 속도가 빨리진 것이 체감이 되었다.
-
11버전 : 1분 50초(빌드에 걸리는 총 시간)
-
12버전 : 1분 38초(빌드에 걸리는 총 시간)
-
빌드에 포함된 항목
- 타입체크
- ESLint 에러 확인
- 컴파일
- 정적 페이지 생성
공식홈페이지나 유튜브로 홍보했던 것 처럼 드라마틱하게 3배 또는 5배까지 빨라지진 않았다. 컴파일이나 정적 페이지 생성에선 빨라진 것 같은데 타입체크나 ESLint 에러 확인 하는 부분은 별 차이가 없는 것 같았다. 시간측정을 손으로 스탑워치를 들고 측정한 것이기 때문에 정확하지 않을 수도 있다.
- 간단하게 테스트
- course/[id] 에 미들웨어를 만들기
- id가 1이 아니면 404 화면을 띄우기
- 404 화면 컴포넌트 필요
- _middleware.ts 에선 리액트 컴포넌트 문법(jsx or tsx)를 사용할 수 없음
- 서버쪽 코드라고 생각하면 될 것 같다
- console.log도 서버(node.js) 터미널에 찍힘
- 아직은 언제 어떻게 써야할지 지켜봐야겠다
- 완전히 MVC 패턴처럼 서버에서 코딩하는 느낌이다
- Next.js 공식 예제 코드
- 미들웨어에서 redirect를 해당 미들웨어가 포함된 라우터 폴더로 보내면 무한 루프에 빠짐
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())
}
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',
},
});
}
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 />
에서 AVIF 포맷을 지원한다고 해서 Image 태그를 다시 한번 사용해봤다.
- AVIF 포맷 : 용량이 더 적은 파일 형식(.jpg, .png 같은 것)
- https://nextjs.org/docs/api-reference/next/image
- 다른 도메인의 asset(image 등)을 가져올 때
- Error: Image with src "https://cdn.inflearn.com/assets/brand/brand_logo.png" must use "width" and "height" properties or "layout='fill'" property.
- Image 태그는 불편한게 항상 width, height을 지정해줘야 됨
// next.config.js
module.exports = {
images: {
domains: ['assets.example.com'],
},
};
- width와 height을 지정할 때 '80%'를 입력값을 주면 80px로 인식함 : 스타일링이 불편함
- %를 이해 못 하는 것 같음
-
Image
태그는 거의 사용 안 할 것 같음