Next JS 시작

Next.js의 주요 특징

1. 파일 기반 라우팅

• pages 폴더 내부의 파일 이름이 자동으로 URL 경로가 됨
• 예 : pages/about.js ----- /about

2. 서버 사이드 렌더링(SSR)

• 서버에서 미리 HTML을 렌더링한 뒤 클라이언트에 전달
• SEO(Search Engine Optimization) 최적화가 필요할 때 유용

3. 정적 사이트 생성(SSG)

• 빌드 시 HTML을 미리 생성하여 정적 파일로 제공
• 빠른 로딩 속도를 제공하며, CDN(Content Delivery Network)에 배포하기 쉬움

4. API 라우트

• pages/api 폴더를 사용하여 백엔드 API를 작성할 수 있음

5. CSS 및 스타일링 지원

• CSS, Sass, Tailwind CSS, Styled-Components 등 다양한 스타일링 라이브리러를 지원

6. 이미지 최적화

• next/image 컴포넌트를 사용하여 이미지 최적화를 제공

7. Typescript 지원

• Typescript를 기본적으로 지원하며, 설정도 간단

Next.js 설치 및 기본 설정

npx create-next-app myproject
cd myproject
npm run dev

 

기본적으로 http://localhost:3000 에서 실행

 

설치 시 부가설정

 

- ESLint : Javascript 및 Typescript 코드의 문제를 찾아내고 수정할 수 있도록 도와주는 정적 코드 분석 도구

- Turbopakc : Next.js 13 이후에 도입된 새로운 번들링 도구로, 기존의 Webpack을 대체하기 위해 설계되었다. Next.js의 개발사인 Vercel이 만든 이 도구는 초고속 번들링을 목표로 하며, 특히 대규모 프로젝트에서 더 나은 성능을 제공