NextJS 프레임워크로 React 프로젝트 시작하기 (NextJS React 프로젝트 01)

 

React는 Vue와 Angular와 많이 비교되지만, 그래도 프레임워크가 아닌 라이브러리입니다.
그러다보니 React만으로는 아쉬운 점이 많기도 하는데요,
그래서 적지 않은 분들이 프레임워크를 함께 사용합니다.

React 프레임워크 중에서는 GatsbyJS와 NextJS가 가장 유명합니다.
저는 그 중에서 NextJS를 통해 프로젝트를 시작해보았습니다!
(TODO: 두 개의 차이는 나중에 다른 글로 올려볼게요!)

 

 

1. NextJS 프로젝트 생성하기

우선 처음 프로젝트를 시작할 때에는 다음과 같은 명령어를 통해 시작하시면 됩니다.

cpx create-next-app

 

 

실행하면 app 이름을 적으라고 나오고, 엔터를 치면 완료되었다고 터미널에 표시가 됩니다.

 

 

그러면 이제 프로젝트 설정은 끝이 납니다! 매우 간단하죠?

 

 

 

2. NextJS 구조 살펴보기

한 번 create-next-app으로 생성된 프로젝트의 폴더구조를 살펴보겠습니다.

 

1) pages

우선 pages에는 index.js, _app.js, api 파일이 있습니다. NextJS에서 편한 점은 라우팅인데요, pages 밑에 원하는 이름의 파일을 만들면 해당 경로로 라우팅이 가능합니다. pages 밑에 faq.js라는 파일을 만들고 실행한다면 자신의 주소 뒤에 /faq를 url에 입력했을 때 해당 파일의 내용을 확인할 수 있는 것이죠.

 

_app은 최상단에 위치한 파일이라고 생각하시면 됩니다. index나 faq.js를 비롯한 모든 페이지에 접근할 때 _app을 거쳐서 접근하게 되는 것입니다. 

 

 

2. public

public은 말 그대로 퍼블릭 한 파일이 위치한 곳인데요, 이미지와 같은 정적이고 공개적인 파일을 모아두게 됩니다.

 

 

3. styles

해당 폴더는 예전 create-next-app에는 없었습니다. 아마 NextJS가 자체적으로 css 방식을 지원하면서 module 방식을 장려하는데, 그러한 스타일시트를 모아둔 폴더입니다.

 

 

 

3. NextJS 실행하기

package.json 파일을 보면 dev, build, start 스크립트가 있을 것입니다. 만약 배포를 위해 빌드하거나 배포된 내용을 실행시킨다면 build나 start를 실행하면 되고, 핫 리로드를 통해 변경된 내용을 확인하면서 개발을 원하신다면 dev 스크립트를 이용하시면 됩니다.

 

다음과 같이 실행하면, 로컬호스트 3000번 포트에서 아래 이미지와 같은 초기 화면을 확인할 수 있습니다.

npm run dev

 

 

다음에는 파일을 생성하고 수정해보며 NextJS 프로젝트를 이어나가보겠습니다