Next.js의 강점

1. 성능

   • 초기 로드 시간 단축
   • 자동 코드 스플리팅
   • 이미지 최적화

2. SEO

   • 검색 엔진 인덱싱 용이

3. 개발자 경험

   • 간편한 환경 설정
   • 자동 코드 분할 등 유용한 기능 제공

4. 확장성

   • Vercel의 서버리스 기능 등 다양한 툴 지원

5. 유연성

   • 방대한 리액트 커뮤니티의 정보와 라이브러리 활용 가능

프레임워크 vs 라이브러리

핵심은 어플리케이션의 제어 흐름을 누가 가지고 있느냐

• 라이브러리: 기능 모듈화, 제한된 기능 제공하는 프로그램
• 프레임워크: 모든 프로그래밍적 지원, 개발에 필요한 다양한 기능과 구조 제공

Next.js 사용 이유

• Configuration-less: 복잡한 설정 없어도 됨
• 렌더링 및 코드 스플리팅: 효율적인 페이지 로드
• 쉬운 서버 개발 및 배포: 간소화된 과정

페이지 라우터 vs 앱 라우터

• 페이지 라우터: 직관적
• 앱 라우터: 최신 기술 활용에 유리

Link를 쓰는 이유

Prefetching

• 데이터를 미리 로드하여, 페이지 전환 속도가 향상됨
• 사용자의 viewport 영역 안에 링크 태그가 들어오면 자동으로 이루어짐

Client-side Navigation

• SPA처럼 전체 페이지를 새로 고치지 않고도 빠르게 전환됨. 이로 인해 사용자 경험이 개선

useRouter

• 반드시 "use client" 디렉티브를 추가해야함
• 반드시 Next13부터 import 구문은 next/navigation에서 가져와야함

Not-found

• 404 페이지를 구현하려면 src/not-found.tsx 파일을 생성하면 됨

MetaData

기본 메타데이터 설정

export const metadata: MetaData = {
  title: "",
  description: "",
};

동적 메타데이터 생성

export const generateMetadata = ({ params }: Params) => {
  return {
    title: "",
    description: "",
  };
};

rem

• rem은 root em의 약자로, HTML 기본 폰트를 기준으로 하는 단위 (기본 16px)
• Tailwind CSS에서는 1이 0.25rem 즉, 4px로 표현됨