[웹개발/개인홈페이지 개발] next.js 설치 및 시작하기

이전부터 늘 해보고 싶었던

개인 홈페이지 만들기 프로젝트 ..

 

너무너무너무 귀찮아서

지금까지 미루고 미루다가

 

이젠 정말 남는 시간마다

개발을 해보기로 했다

 

지금까지 내가 해본 웹 개발은

백엔드 spring + 프론트 vanillaJS로

정말 간단한 회사의 업무툴을

두 번정도 만들어 보았고

 

회사 다닐 때

spring으로 백엔드 작업 해본게

전부이긴하다

 

그래도 웹개발하면 가장 많이쓰는

node.js나 react를 한 번 접해보고싶었고

이전부터 늘 개인 홈페이지를 만들어보고 싶었어서

시작하게 된 프로젝트-!

---

NextJS란?

next.js는 웹 어플리케이션 무료로 배포로 유명한

vercel이라는 회사에서 개발했다

 

Next.js는 react 기반의

웹 개발 프레임워크이다

 

흔히 주로 비교되는 node.js와의

가장 큰 차이점은 바로

Server Side Rendering(SSR)을

지원한다는 사실

 

node.js에서 react 개발은 주로

Client Side Rendering(CSR)을 지원하는데

 

물론 서버사이드나 클라이언트 사이드나

장단점은 있지만

아무래도 SSR의 가장 큰 장점은

빠른 로딩 속도가 아닐까 싶다

 

사실 개인 홈페이지 프로젝트는

클라이언트 사이드에서의

그렇게 고난도의 작업도 필요하지 않고

 

DB에서 복잡한 데이터를 가져와야할

필요도 없기 때문에

 

서버 사이드 렌더링이 적합하다고 생각했고

next.js를 프레임워크로 채택하였다

---

next.js 시작하기

 

1. npm 설치하기

next.js를 시작하기 위해선

우선 컴퓨터에

node.js의 패키지 관리 도구인

npm이 설치되어있어야한다

 

나같은 경우는 이미 설치가 되어있어서

따로 설치해줄 필요는 없었다

 

본인이 설치가 되어있는지 확인하기 위해선

npm --version

 

을 터미널에 쳐주면 된다

 

만약 npm이 설치되어있다면

밑에 버전이 출력된다

 

npm이나 node.js가 없는 상태라면

아래 홈페이지를 참고해서 설치해주기

 

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

 

 

2. next.js 프로젝트 생성

새로운 next.js 프로젝트를 생성하기위해선

npx create-next-app@latest

를 터미널에 입력해주면 된다

 

나는 typescript까지 같이 쓸 예정이라

npx create-next-app@latest --typescript

뒤에 --typescript까지 추가해줬다

 

명령어를 입력하면

각종 option들을 선택할 수 있다

우선 app 이름을 설정해주고

 

코드의 일관화 및 간편한 작성을 도와주는

ESLint는 yes로

css를 도와주는 도구인 Tailwind는 그냥 No로 했다

 

사실 나도 이런 툴들에 대해선 잘 몰라서

대충 입맛대로 해주었다

 

이렇게 해서 옵션들을 다 선택해주면

next.js 프로젝트 폴더가

생성된다

 

 

더욱 자세한 설치방법은

공식문서가 매우 잘 나와있으니

참고하면 좋을 것 같다

 

https://nextjs.org/docs/getting-started/installation

Getting Started: Installation | Next.js

 

3. next.js 프로젝트 실행

 

이렇게 자동으로 생성된

my-app 폴더를 열어줬다

 

테스트로 한 번 실행을 해보자

터미널에

npm run dev

를 치면 dev모드로 실행이 된다

 

실행한 후

http://localhost:3000

로 접속해주면

 

요론 웹사이트가 뜨는 것을

확인할 수 있다

---

 

이제 개발하러 고고..

 

 

참고:

https://nextjs.org/docs

Docs | Next.js