Next.js와 프로젝트 생성

Next.js란?

Vercel이 개발한 오픈 소스 React 프레임워크서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원

 

서버 사이드 렌더링: 페이지를 서버에서 미리 렌더링하여 초기 로딩 속도를 개선하고 SEO를 향상
정적 사이트 생성: 빌드 시에 HTML 파일을 생성하여 빠른 응답 속도를 제공
간편한 라우팅: 파일 기반 라우팅 시스템으로, 페이지 파일을 생성하는 것만으로도 자동으로 라우팅이 설정
API 라우트: 서버리스 함수로 API를 구현할 수 있어, 백엔드 없이도 간단한 API를 만들 수 있다.
이미지 최적화: 자동으로 이미지 파일을 최적화하여 성능을 개선

 

React와 다르게 Next.js는vite와 동시에 적용 불가능하다.

새로운 프로젝트 생성

 

pnpm 의존성 설치
$npm install -g pnpm

 

프로젝트 생성
$npx create-next-app@latest <프로젝트 명> --use-pnpm

 

실행 시키면 해당 선택 여부가 하나씩 뜰 것이며,

아래와 같다.

사용자가 원하는 대로 선택하면 됀다.

 

(타입스크립트 사용 여부)
√ Would you like to use TypeScript? ... No / Yes

(ESLint 사용 여부)
√ Would you like to use ESLint? ... No / Yes

(Tailwind 사용 여부)
√ Would you like to use Tailwind CSS? ... No / Yes

(src/ 디렉토리 여부 No 선택시 src대신 app폴더)
√ Would you like your code inside a `src/` directory? ... No / Yes

(앱 라우터 사용 여부)
√ Would you like to use App Router? (recommended) ... No / Yes

(Turbopack 사용 여부, No 선택 시 Webpack)
√ Would you like to use Turbopack for `next dev`? ... No / Yes

(파일경로 별칭 사용 No 선택 시 ../ Yes선택 시 @/ 그리고 그에 맞게 세팅 )
? Would you like to customize the import alias (`@/*` by default)? » No / Yes

개발 실행

pnpm i프로젝트 패키지를 설치
$pnpm i

 

개발 서버 시작
$pnpm dev