Next.js 초기설정 및 파일 설명

Next.js 개발 환경 세팅에 관해 포스팅해보려 합니다.

먼저, 구글에 Nodejs 검색해서 LTS라 써져있는 버전을 설치합니다.

nodejs 설치 페이지

 

설치가 완료되었으면 작업용 폴더를 만든 후, vscode로 엽니다.

그 후 터미널에,

npx create-next-app@latest

 

를 입력 후 엔터 시 프로젝트 생성이 됩니다.

폴더명과 사용할 언어같은 경우에는 알아서 체크해주시면 됩니다.

사이트를 브라우저로 미리보기를 띄우고 싶다면,

npm run dev

를 입력해 터미널에 나온 url로 접속하면 됩니다.

 

초기 페이지

---

app 폴더 : 우리가 코드를 입력할 폴더입니다. 

page.js : 메인페이지 

layout.js : 메인페이지 감싸는 용도의 페이지입니다. 

public 폴더 : 이미지나 static 파일 보관용 폴더입니다.

api 폴더 : 서버기능 만드는 곳입니다.

next.config.js : nextjs 설정 파일입니다 

node_modules 폴더 : 설치한 라이브러리 보관용 폴더입니다. 

package.json : 설치한 라이브러리 버전 기록용 파일입니다.