1 분 소요

작업 환경 : Mac OS 🧑🏻‍💻

🖥 Next.js 관련 모든 글 보기

안녕하세요. Nerd Lee 입니다.

이번 글은 next.js를 설치하는 방법과 실행하는 방법에 대해서 글을 적어보겠습니다.

NEXT.JS Intro

1. Next.js 란?

  • Next.js는 node.js를 기반으로 구축된 오픈 소스 웹 개발 프레임워크로써, 서버 측 렌더링 및 정적 웹사이트 생성과 같은 React 기반 웹 애플리케이션 기능을 가능하게 한다. 라고, 위키백과는 설명하고 있습니다.

  • 쉽게 말해서, React 또한 SSR ( Server Side Rendering ) 방식으로 설계되어 있어 SSR이 가능은 하지만, 구현하기가 굉장히 번거롭기 때문에 그래서 나온 것이 Next.js 프레임워크다. 라고 말할 수 있습니다.

2. 프로젝트 생성하기

React.js를 설치하는 것과 비슷합니다. 터미널을 열고 명령어를 입력합니다.

  • 바탕화면에 설치하시려면, cd desktop을 입력해서, desktop에 위치하게 한 다음 자바스크립트 환경을 하시려면 2번째 명령어를, 타입스크립트는 3번째 명령어를 입력하시면 됩니다.

  • 입력한 뒤에 y를 입력하고, 해당 앱의 이름을 입력하시면 됩니다.

3. 프로젝트 실행해보기

vs code로, 해당 폴더를 열어보시면 다음과 같은 폴더구조를 가지고 있습니다.

[ TypeScript ]

[ JavaScript ]

vs code terminal( Command (⌘) + J )을 실행해서 명령어를 입력한 뒤 실행해봅시다!

  • ‘npm run dev’를 입력하면 실행이 됩니다. 하지만 react 처럼 브라우저를 열어주진 않습니다.
    하지만 ready - started .. url : http://localhost:3000 이 보이실 것입니다.
    그 링크를 command + 클릭 또는 브라우저에 http://localhost:3000을 입력하시면 실행이 됩니다.


이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!

참고