[Next.js] Next.js를 설치하고 실행해 보자!

 

Next.js? 왜 사용하는 거야?

현재, Next.js와 같은 서버 사이드 렌더링을 지원하는 프레임워크가 큰 인기를 끌고 있습니다. 이전에는 대부분의 렌더링과 라우팅 기능을 브라우저의 자바스크립트에 의존하는 클라이언트 사이드 렌더링이 유행이었습니다. 이는 서버를 걸쳐 필요한 자원을 받아올 일이 적어 사용자에게 우수한 UI/UX를 제공했습니다.

 

그러나 클라이언트 사이드 렌더링은 구글 검색 노출이 어렵고 초기 페이지 로딩 속도가 느려 수익에 부정적인 영향을 미쳤습니다. 이에 따라 정적 사이트 생성을 지원하고 렌더링과 라우팅 기능을 서버가 담당하는 서버 사이드 렌더링이 대세로 떠올랐습니다.

 

그래서 저도 한번 공부를 해보도록 하겠습니다..

 

설치 및 실행방법

간단합니다. node.js와 npm이 설치되어 있다면 vscode 터미널에

npx create-next-app@latest --ts

 

입력해줍니다.

Typescript를 기반으로 진행할 것이기 때문에 --ts를 적었습니다.

 

 

하지만, 오랜만에 설치를 하는 저는 node.js와 npm의 업데이트가 필요한 이슈가 있었습니다. 

이 글을 읽는 분도 그런 이슈가 있으시다면,

[Node.js] Node와 NPM 버전 확인 및 최신 버전 업데이트 (tistory.com)

[Node.js] Node와 NPM 버전 확인 및 최신 버전 업데이트

여기를 참고하시길 바랍니다.

 

 

 

√ What is your project named? (원하는 이름을 적어줍니다.)
-> 프로젝트 명 설정
√ Would you like to use TypeScript with this project? ... No / Yes
-> 타입스크립트 사용할건지?
√ Would you like to use ESLint with this project? ... No / Yes
-> eslint 사용할건지?
√ Would you like to use Tailwind CSS with this project? ... No / Yes
-> Tailwind CSS 사용할건지?
√ Would you like to use src/ directory with this project? ... No / Yes
-> src 디렉토리 사용할건지?
√ Use App Router (recommended)? » No / Yes
-> App Router 사용할건지?
√ Would you like to customize the default import alias? ... No / Yes
-> import 구문 커스터마이징할건지?

 

본인이 필요한 옵션을 선택해주시면 됩니다.

 

Success! Created my-app at C:\Users\Yook\my-app

 

설치 성공 문구가 뜨면,

해당 디렉토리로 이동합니다.

cd (프로젝트명)

 

그리고 실행을 위해 해당 명령어를 입력해줍니다.

npm run dev

 

 

 

http://localhost:3000으로 접속합니다.

 

 

설치 및 실행 성공

 

위의 링크로 들어가면 해당 화면이 뜹니다.

이렇게 성공적으로 Next.js를 설치하고 실행해봤습니다.