📍 Next.js란?

• Vercel이라는 미국 스타트업에서 만든 리액트 기반 SSR 프레임워크
• PHP에 영감을 받아 만들어짐
• 다른 리액트 기반 SSR 프레임워크인 Remix, Hydrogen에 비해 훨씬 역사도 오래되고 사용자도 압도적으로 많이 보유
  • 모기업인 Vercel의 전폭적인 지원을 받고 있음
  • Next.js뿐만 아니라 SWR, SWC, Turbopack, Svelte 등 웹 생태계 전반에 영향력 있는 프로젝트를 계속해서 개발하거나 인수했음
  • 꾸준히 새로운 기능을 추가해서 릴리스하고 있음

<br /> <br />

📍 Next.js 시작하기

npx create-next-app@latest --ts

✏️ package.json

• 주요 의존성
  • next: Next.js의 기반이 되는 패키지
  • eslint-config-next
    • Next.js 기반 프로젝트에서 사용하도록 만들어진 ESLint 설정
    • 구글과 협업해 만든 핵심 웹 지표에 도움이 되는 규칙들이 내장돼 있음
    • Next.js 기반 프로젝트라면 꼭 사용하는 것을 추천함
    • eslint-config-airbnb와 같은 기존에 사용하던 규칙이 있다면 이에 추가로 함께 사용하는 것을 추천함

✏️ next.config.js

• Next.js 프로젝트의 환경 설정 담당. Next.js를 자유자재로 다루려면 반드시 알아야 하는 파일

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = nextConfig;

• 첫 줄 주석: js 파일에 ts의 타입 도움을 받기 위해 추가된 코드 (없다면 일일이 타이핑해야 함)
• reactStrictMode
• swcMinify
  • 번들링과 컴파일을 더욱 빠르게 수행하기 위해 만들어짐.
  • 바벨보다 빠른 이유?
    • js 기반의 바벨과는 다르게 러스트(Rust)라는 완전히 다른 언어로 작성했다는 점 (러스트는 C/C++와 동등한 수준의 속도)
    • 병렬로 작업을 처리한다는 점 등
  • 이러한 SWC를 기반으로 코드 최소화 작업을 할 것인지 여부를 설정하는 속성
    • SWC가 바벨에 비해 더 빠른 속도를 보여주기 때문에 특별한 이유가 없다면 SWC를 쓰는 것을 권장
  • 13부터는 기본값이 true로 설정되어 있음

✏️ pages/_app.tsx

• \_app.tsx, 그리고 내부에 있는 default export로 내보낸 함수는 애플리케이션의 전체 페이지의 시작점임
• 페이지의 시작점이라는 특징 때문에 웹 애플리케이션에서 공통으로 설정해야 하는 것들을 여기에서 실행할 수 있음
• \_app.tsx에서 할 수 있는 내용
  • error boundary를 사용해 애플리케이션 전역에서 발생하는 에러 처리
  • reset.css 같은 전역 CSS 선언
  • 모든 페이지에 공통으로 사용 또는 제공해야 하ㅡ는 데이터 제공 등
• 최초: SSR -> 이후에는 클라이언트에서 \_app.tsx의 렌더링이 실행됨