[next.js] next js를 시작해보자

Next js란

next js는 리액트를 위해서만든 오픈소스 자바스크립트 웹 프레임워크입니다.

• 여기서 리액트는 페이스북에서 개발한 웹 개발을 위한 라이브러리입니다.
• 그래서 추후 리액트도 따로 다루어 보겠습니다.
  

Next js를 사용하는 이유

next js에는 리액트에 없는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)같은 많은 기능들을 제공해주기 때문입니다.

---

Next js를 사용하기

Next.js도 리액트와 똑같이 npm을 설치해야 합니다.

npm 설치

npm은 node.js의 패키지 관리자이기때문에 node.js를 설치해야합니다.

• node.js는 홈페이지를 방문해서 다운로드를 해야합니다.

설치 확인

cmd 혹은 Teminal에 node -v를 입력하면 숫자가 나오면 정상입니다.

npm -v도 입력해서 버전이 출력이 된다면 정상 설치된것이다.

macOS

맥에서는 패키지를 관리하고 설치할때 대부분 Homebrew를 이용해서 합니다. 그렇기 때문에 제일 먼저 Homebrew를 설치해야합니다.

• Homebrew 설치

  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  

• brew 설치확인

  brew --version
  

• Node 설치

  brew install node
  

Windows

윈도우에서는 Chocolatey라는 패키지 매니저를 이용해서 관리합니다. 관리자 권한으로 명령 프롬포트를 열고 Chocolately를 설치해줍니다.

• Chocolately 설치

   Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
  

• 설치 확인

  choco -version
  

• Node 설치

  choco install -y nodejs.install
  

  
  

create-next-app 설치하기

React 프레임워크인 Next.js를 사용하기 위해서는 create-next-app을 설치해야합니다.

• 설치하기

  npm install -g create-next-app
  

• 설치 확인

  create-next-app --version
  

  문제없이 설치가 되었다면 create-next-app버전이 표시됩니다.

Next.js 프로젝트 생성

• create-next-app을 이용한 프로젝트 생성

javascript

npx create-next-app@latest

typescript

npx create-next-app@latest --typescript

위 명령어를 입력하면 여러 질문들이 나올겁니다.

• What is your project named? my-app
  1. 원하는 프로젝트 명을 입력하시면 됩니다.
     
• Would you like to use TypeScript? No / Yes
  1. 만약 타입스크립트를 사용한다면 Yes로 해주세요
     
     
• Would you like to use ESLint? No / Yes
  1. 정적 코드 분석 툴 ESLint를 사용할지 말지 선택하시면 됩니다.
     
• Would you like to use Tailwind CSS? No / Yes
  1. Tailwind CSS를 사용한다면 YES를 해주세요.
     
• Would you like to use src/ directory? No / Yes
  1. src폴더 아래에서 관리할건지 root에서 관리할건지 선택
     
• Would you like to use App Router? (recommended) No / Yes
  1. App Router를 사용할지 말지 선택해주자 ( 하는걸 추천한다 )
     
• Would you like to customize the default import alias (@/*)? No / Yes
  1. import 구문 커스터마이징을 이용할지 말지 선택한다.
     
• What import alias would you like configured? @/*
  1. import 구문 커스터마이징 옵션이다 아무것도 입력안하면 @로 설정될 것이다.
     

Next.js 프로젝트 시작하기

모든 프로젝트 생성이 끝났다면

npm run dev

를 입력하면 프로젝트가 시작될 것이다.

http://localhost:3000를 접속해서 Next.js 기본화면이 보이면 성공이다.

마무리

다음에는 앱 라우터와 페이지 라우터를 이용하는 방법을 알아볼 것이다.