Next.js-1 (install)

Patrick·2021년 4월 11일
0

Next.js

목록 보기
1/1
post-thumbnail

Javascript를 공부하고, React를 공부하고 포트폴리오를 만들고 있던 중, 작게나마 협업을 해본 경험이 있다면 스스로의 기술을 더 키울 수 있을 것 같았다.

그래서 집사답게...!!
고양이를 좋아하는 사람들이 모여서 팀 캔따개 라는 이름으로 프론트엔드 3명, 백엔드 3명이서 "1일 1냥" 이라는 작은 toy project를 시작했다!
( 이 때가 2021년 3월 15일이었는데, 벌써 한 달이 다되어간다! )

프로젝트의 목적은 내가 써보고 싶었던 기술들을 써보면서 완성에 목적을 두고 해보자는 것이었다.
그래서 나는 React를 하면서 얼마전에 익혀본 MobX에 대해서 말을 했고, 다른 2년차 프론트엔드 현직자 분은 Next.js를 말했다.
그래서 Next.js에서 Mobx를 사용하는 것으로 짬뽕이 되어버렸다.

그래서 Next.js를 조금씩 공부해보려고 한다.

우선 왜 Next.js를 사용하는가에 대해서 알아보자!

Next.js는 React 기반의 Framework이며, folder, file기반으로 Routing을 지원한다.

React를 사용하면 SSR을 할 때 귀찮고 어려운데, Next.js는 SSR을 지원하므로 SEO 등도 비교적 수월하게 적용할 수 있다!



오늘은 가벼운 마음으로 설치하기!!

  1. node, npm이 설치되어있어야한다
  2. 아래 방법으로 install을 하면 된다
$ npx create-next-app
$ yarn create next-app

이렇게 create-next-app으로 설치하게 되면 어떤 점이 좋을까?
(처음에는 단순히 설치하는 방법인줄 알았다...)
1. webpack과 babel을 이용해서 compile과 bundling이 자동으로 된다
2. 자동 refresh 기능으로 수정하면 화면에 바로 반영된다
3. SSR(server side rendering)이 지원된다
4. static 파일을 지원한다 (public 파일 밑에 만들면 된다!)

그리고

$ npm run dev

를 해보면 실행되어지는 것을 볼 수 있을 것이다.


[ reference ]

https://nextjs.org/

profile
예술을 사랑하는 개발자

0개의 댓글