Next.js 14 버전 설치 및 프로젝트 생성하기
FE/Next.js2024. 2. 9. 11:34Table of Contents
728x90
실행 환경 설정
Next.js 14버전은 node버전이 18.17
이상이어야 합니다. 따라서, n 패키지 또는 nvm을 통해 node 버전을 18.17로 설치 및 변경해줍니다. node 버전을 어떻게 변경해야 하는지 모르시는 분은 아래 글을 참고해주세요.
n 패키지를 이용하여 node 버전을 변경합니다. 그리고 버전이 제대로 변경됐는지 확인해봅시다.
sudo n 18.19.0
node -v
프로젝트 생성 및 실행
프로젝트 생성
node 버전을 변경했으면, npx create-next-app
를 이용하여 프로젝트를 생성합니다.
npx create-next-app@latest
프로젝트를 생성하기 위해 설정 값을 물어보는데, 본 글에서는 모두 기본값으로 설정했습니다.
프로젝트 설정 값 상세 설명
- What is your project named?: 프로젝트 이름 설정
- Would you like to use TypeScript?: 타입스크립트 사용여부 (기본값 Yes)
- Would you like to use ESLint?: ESLint 사용여부 (기본값 Yes)
- Would you like to use Tailwind CSS?: tailwindcss 사용여부 (기본값 Yes)
- Next.js는
tailwindcss
를 기본적으로 제공해주기 때문에 따로 css를 위한 라이브러리 혹은 설정이 필요 없습니다. (매우 편리함)
- Next.js는
- Would you like to use `src/` directory?: src 디렉토리 사용여부 (기본값 Yes)
- 프로젝트 root에 있는 프로젝트 구성 파일(package.json 등)과 Application 코드를 분리 할 수 있기 때문에 사용하는 것을 권장드립니다. (이전에는 기본값이 No라서 따로 Yes로 바꿔줬었는데 버전이 올라가면서 기본 값이 바뀌었네요)
- Would you like to use App Router? (recommended): app routing 방식 사용여부 (기본 값 Yes)
- Would you like to customize the default import alias (@/*)?: root 경로 import aliasing 말고 커스텀하게 import alias를 사용할지 여부 (기본 값 No)
프로젝트 실행
프로젝트 생성은 끝났고, 실행해봅시다.
cd my-app
yarn install
yarn dev
아래와 같이 Ready 가 완료된 문구가 나오면 정상적으로 실행이 된 것이기 때문에, http://localhost:3000
으로 접속을 해봅시다.
정상적으로 프로젝트가 실행된 것을 확인했습니다.
무료 호스팅하기
728x90
'FE > Next.js' 카테고리의 다른 글
Next.js 14 프로젝트 규모에 따른 디렉토리 구조 (0) | 2024.02.13 |
---|---|
vercel에 Next.js 웹 앱 프로젝트 무료 호스팅하기 (0) | 2024.02.09 |
next.js에서 a 태그 대신 Link를 사용하는 이유 (0) | 2023.09.22 |
@bluemiv :: BLUEMIV
IT 기술에 대한 글을 주로 작성하고, 일상 내용, 맛집/숙박/제품 리뷰 등 여러가지 주제를작성하는 블로그입니다. 티스토리 커스텀 스킨도 개발하고 있으니 관심있으신분은 Berry Skin을 검색바랍니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!