Next.js] Next.js 설치 및 시작, 프로젝트 생성 (Insallation)

공홈을 보면서 하나씩 정리해 나가보려 합니다.

그 시작인 Next.js 설치부터 시작해 보겠습니다.

https://nextjs.org/

 

일단 제일 먼저 Node.js가 설치 되어있어야 합니다.

React개발자면 당연히 설치 돼있을 것으로 생각 듭니다.(16.8 버전 이상이라고 안내되어 있네요)

 

 

 

---

 

 

 

자동설치

npx create-next-app@latest

 

위 명령어를 입력하면 제일 최신 버전의 Next.js가 설치됩니다.

 

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
What import alias would you like configured? @/*

 

진행하다 보면 위와 같이 이것저것 설치할 건지에 대해 나옵니다.

Next.js 패치 지를 만들면서 같이 사용할 것들과 폴더 구조 등을 설정하는 것입니다.

 

 

 

---

 

 

 

수동설치

수동설치할 일이 있을지는 모르겠지만...

npm install next@latest react@latest react-dom@latest

 

위 명령어로 설치해 주시면 됩니다.

 

추가로 프로젝트 실행 명령어나 폴더 구조 등을 직접 만들어야 되는 것으로 보입니다.

해당 부분은 넘어가겠습니다.

 

 

 

 

 

 

명령어

"scripts": {
  "dev": "next dev",  // Next.js development 모드
  "build": "next build",  // Production용 build
  "start": "next start",  // Production용 start
  "lint": "next lint"  // Next.js에 내장되어 있는 ESLint구성을 설정하기 위해 실행
}

 

package.json 파일을 열어 보면 위와 같이 스크립트가 작성되어 있습니다.

주석과 같이 안내되어 있고, lint 빼고는 자주 사용하는 것들입니다. (저만 안 써 본거일 수도 있습니다.)

 

 

 

---

 

 

 

실행

그러면 이제 위 명령어 중 npm run dev를 입력하여 프로젝트를 실행하면 Next.js에서 만들어 놓은 기본 페이지를 확인할 수 있습니다.

 

해당 페이지는 app/layout.tsx에서 편집할 수 있습니다.