[Next.js] Next.js 소개 및 환경 설정

Next.js 공식 홈페이지

Next.js by Vercel - The React Framework for the Web

들어가보게 되면 웹을 위한 React 프레임워크라고 설명하고 있습니다. 또한 아래 설명으로는 일부 세계 최대 기업에서 사용하는 Next.js를 사용하면 최신 React 기능을 확장하고 가장 빠른 빌드를 위한 강력한 Rust 기반 Javascript 도구를 통합하여 풀스텍 웹 애플리케이션을 만들 수 있다고 말하고 있네요 :)

프레임워크 vs 라이브러리

• 프레임워크는 기반 구조 vs 라이브러리는 개발 편의 도구들
• 제어 주도권 프레임워크가 가짐 vs 제어 주도권 사용자가 가짐
• 프레임워크는 기계(like 굴삭기) vs 라이브러리는 공구(like 펜치니퍼)
• 프레임워크 자유도 상대적으로 작음 vs 라이브러리 자유도 상대적으로 큼

프레임워크의 장점

• 개인이 해야할 고민들을 프레임워크 개발자가 미리하고 반영
  • 그러한 필요한 도구들 아니면 기능들을 프레임워크에 담아둔 것 !
• 특정 디자인 패턴이나 동작과 기능들을 위한 정의와 방식을 정의해둠
  • 기준이 잡혀있음 !
• 여러 개발자가 함께 협업할 때 기준점이 됨

Why Next.js

프론트엔드 개발자들이 가진 고민에 대한 적절한 해결책을 제공하고 있습니다.

 

• 규모가 있는 서비스 구조 설계를 어떻게 할 것인가?
• 개발환경 / 코드 분할 / 파일 기반 구조
• SEO(검색 엔진 최적화)
• 프론트엔드에 필요한 간단한 API 구성
• 손쉬운 배포 시스템 Vercel

Next.js의 대체재는 없나?

Next.js는 대표적인 React 프레임워크로서 자리를 공고히 하고 있습니다. 몇 년전만에도 마땅한 게 없었지만, 최근 대체재로는 Gatsby, Remix 등이 있습니다.

환경 설정

$ npx create-next-app [프로젝트명]

설치 후 다음 명령어를 터미널에서 입력해주면 서버가 실행되게 됩니다.

$ npm run dev

리액트처럼 알아서 브라우저가 띄워지고 그러지 않아서 브라우저로 들어가 localhost:3000번을 입력해주면 잘 실행되고 있는 것을 확인할 수 있습니다.

저는 이번 next.js 공부를 위한 프로젝트를 yarn으로 실행시켜보려고 하는데요. 이번에 yarn을 사용하는 데에 있어 특별한 이유는 사실 없습니다.. npm도 많이들 쓰고 yarn도 많이들 쓴다고 하니 경험으로 ! 기회가 된다면 npm과 yarn을 비교하는 포스팅도 올려봐야겠습니다 :)

추가로, yarn 설치 및 적용

우선 global로 yarn을 설치해주어야 합니다.

$ npm install -g yarn

그리고 프로젝트 경로에서 다음 명령어를 입력해줍니다.

$ yarn

뭔가가 설치되다가 프로젝트 경로에 yarn.lock이라는 파일이 생기면 성공입니다. 한번 yarn으로 서버를 실행시켜 볼까요?

$ yarn dev

동일하게 서버가 잘 띄워진 것을 확인할 수 있었습니다 :)