0%

MotorLatte-화면개발용 Next.js 프로젝트 생성

작성일: 2020-05-05(수)

기타: 휴일, 날씨 맑음

MotorLatte 화면 단 개발을 위한 Next.js 프로젝트를 생성하자.

그냥 react cra로 만들어도 될거 같지만, 인프런에서 Next.js 공부하는 김에 Next.js 로 개발해 보기로 했다.

화면을 담당할 프로젝트 명은 bonneville 이다.

사용할 도구들은 아마 아래와 같을 것이다.

  • WebStorm
  • git
  • github
  • windows terminal
  • node
  • npm

일단 프로젝트 폴더를 아래처럼 만들었다.

motorlatte\ml-bonneville\front

그리고 해당 위치에 windows terminal로 진입해서 npm init 을 하였다.

20210505-2-1.png

생성한 폴더를 webstorm으로 열고 필요한 라이브러리를 설치한다.

1
npm i react react-dom next@9 prop-types

2021-05-05 현재 Next.js는 10 버전이지만, 보고 있는 인프런 강좌가 9버전이라 9버전으로 진행하였다.

20210505-2-2.png

의존성 설치가 완료가 되면, front 폴더 내부에 pages 폴더를 생성하고 그 아래 index.js 파일을 생성한다.

next.js에서 pages 폴더는 중요하다. 절대 다른 이름으로 만들면 안된다.

next.js에서 pages 폴더를 인식하고 그 내부의 react 컴포넌트 파일들은 인식해서, 라우팅의 대상으로 관리하기 때문이다.

index.js 파일은 아래의 내용으로 채운다.

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';

const Home = () =>{
return (
<div>
MotorLatte 개발중
</div>
)
}

export default Home;

20210505-2-3.png

그리고 package.json 을 조금 수정하자. scripts 부분을 아래로 수정하자.

1
2
3
4
"scripts": {
"dev" : "next",
"build": "next build"
}

20210505-2-4.png

terminal에서 npm run dev 명령으로 next.js가 동작하는지 확인해보자.

아 물론 front 폴더 내부에서 실행 해야 한다.

아래처럼 동작 하는 것을 확인 할 수 있다.

20210505-2-5.png