[Nextjs] 프로젝트 일단 만들면서 시작하기

nextjs를 통해 react를 포함시켜 시작하는 방법에 대해 알아보자. react로 Client side rendering(CSR)을 Server side rendering(SSR)로 변환하기 위해 많이 넘어온다. nextjs는 SSR 말고도 SSG나 serverless에도 최적화되어있다. 이러한 Nextjs를 시작하는 것은 환영받을 일이 맞다. Next.js는 react라이브러리를 활용한 프레임워크다. 따라서 react과 다른 기초 지식이 없다면, 시작하기 힘들다고 할 수 있다. 관련 내용은 아래의 url을 참고하여 보고오자.

 

[Web/nodejs] - nodejs 기초 총 정리

 

---

 

nextjs 프로젝트 생성

> npx를 통해 프로젝트를 생성한다.

 

$ npx create-next-app@latest
npm WARN exec The following package was not found and will be installed: create-next-app@latest
? What is your project named? »

 

npx create-next-app@latest 명령어를 통해 프로젝트를 생성할 수 있다.

? What is your project named? »   이부분에 적고 싶은 프로젝트명을 적고 엔터를 눌러준다. 아무것도 안적으면 디폴트 값으로 프로젝트가 생성된다. 이때 적은 이름으로 폴더가 생기고, 그 폴더 안에서 프로젝트가 생성된다. 생성한 폴더에 들어가서 아래의 명령어를 치면 서버가 실행된다.

 

$ yarn dev

 

관련 명령어에 대한 설명은 아래와 같다.

 

$ yarn dev
Starts the development server.
$ yarn build
Builds the app for production.
$ yarn start
Runs the built app in production mode.

 

 

프로젝트 코드에 대해 정리하면 아래와 같다.

 

$ npx create-next-app@latest
npm WARN exec The following package was not found and will be installed: create-next-app@latest
? What is your project named? »  web-test

...
...
...

$ cd web-test
$ yarn dev

 

yarn dev 시 위와 같은 이미지가 뜬다면 성공이다!

 

 

next.js 코드 확인하기

코드 생성 시 기본적인 구조는 아래와 같다.

일단 초입자의 단계에서는 pages부분과 styles 부분만 알아보 페이지 하나는 만들 수 있다.

 

pages/index.js를 확인하자. 이부분이 첫 페이지부분의 UI가 적혀있는 부분이다. 그리고 CSS는 styles/Home.module.css부분을 참고하면된다.

 

 

여기까지를 진행하면, 사실상 Next.js를 회면에 보여주기는 완료이다. 사실 리액트를 많이 사용해본 사람이라면... 당황스러울 정도로 Next.js가 쉽다는 것을 알 수있다.

 

여기까지가 기본 프로젝트 셋팅이다.