[따라하면 돼!] Next JS 완벽 파헤치기 (2 - Next JS로 프로젝트 설정하기)

시리즈 글 치고는 꽤 오랜만에 2번째 이야기로 돌아온 것 같다.

첫번째 글은 왜 이 시리즈를 시작하게 되었는지에 대해서 썼고 이번 글부터 어떤식으로 Next JS 프로젝트를 시작하는지 이야기 해보려고한다!

 

프로젝트 시작하기

일단 어디에 next 프로젝트를 만들지 정해보자.

나는 Desktop에 start-next 폴더를 만들어서 시작할 예정이다.

cd Desktop
mkdir start-next

그 다음 아래와 같이 npm init을 통해 기초 package.json 파일을 생성 한 후, 필요한 모듈을 다음과 같이 설치해주자.

npm init -y
npm install --save react react-dom next

그 다음, 아래와 같이 package.json 파일을 수정해주면 세팅 완료이다!

{
  "name": "start-next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^11.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

바뀐 부분은 init -y로 만들었을 때 scripts 안에 있는 test 오브젝트를 지우고 "dev": "next" 넥스트로 실행하는 명령어를 추가해주면 완료이다.

 

이제 npm run dev명령어를 콘솔창에 입력해보자.

실행 후 localhost:3000으로 접속해보면 아래와 같은 화면을 볼 수 있을 것이다.

마무리

이렇게 나온다면 대성공이다! 404에러 페이지가 나왔지만 이것은 우리가 page관련 코드를 아무것도 작성 하지 않았기 때문이다.

개발도 개발인데, 아무 생각없이 핫한 기술이라고 무작정 쓰고 보여주는 그러한 개발을 권장하지 않는다.

 

다음 시리즈에서는 이번 글을 통해 세팅한 Next JS 프로젝트로 어떤 서비스를 만들어 볼건지 정해보고 그에 따른 페이지 세팅과 어떤 Next JS의 기술들이 있는지, 어떤걸 사용 해서 구현할건지 같이 만들어보자.

 

@JJoGeon