Next.js 기본 폴더구조와 역할

보일러플레이트

 

Next.js를 설치하면 해당 폴더구조로 설치된다.

 

app폴더: 코드를 직접 짜는 공간

page.js : 메인페이지, 리액트의 App.js

layout.js: 메인페이지를 감싸는 용도. 리액트의 index.js

 

public폴더: 이미지나 static 파일 보관하는 공간

api 폴더 : 서버기능 만드는 공간

 

next.config.js : nextjs 설정 파일

node_modules 폴더 : 설치한 라이브러리 보관용 폴더 

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

 

이렇게 구성되어있다. 일단 기존 리액트랑 비슷하다..!

 

 

Next.js 설치방법

(터미널을 킨다)

1. npx create-next-app@latest --experimental-app

2. 프로젝트 명 설정하고, 타입스크립트니 뭐니 여러가지 설정을 한다. (y/n)

3. npm run dev  쳐서 실행시킨다.

4. http://localhost:3000/  가서 확인한다.