블로그만들기(1) - Nextjs

Next.js Document

Create a Next.js App
React.js를 통해 웹 어플리케이션을 빌드하려면 세팅해야하는 사항이 많이 있다.

webpack같은 번들러를 사용해 번들로 묶고 Babel과 같은 컴파일러를 통해 JavaScript코드로 변환해주어야 한다. 또한, 코드를 분할하는 방법으로 최적화를 수행해야하며, 성능 및 SEO를 위해 SSR 혹인 CSR을 사용하는데 이때 React로 작성한 앱을 연결하려면 Server Side의 코드를 작성해야한다.

프레임워크는 이러한 문제를 해결할 수 있으나 적당한 추상화를 거치지 않으면 많은 효과를 얻을 수 없다.

Nextjs는 이러한 문제를 해결하기 위한 솔루션을 제공한다.

• 페이지 기반 라우팅 시스템
• SSG
• SSR
• 자동 코드 분할
• Fast Refresh 지원
• Serverless 함수로 API 경로 제공
• Fully extendable
• etc ...

first Next.js App

Next.js 도큐먼트에서는 npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter" 의 command로 Next.js App을 생성하여 빌드하라고 명시되어 있다.

하지만 create-next-app을 통해 환경 설정을 하지 않고 진행하려 한다.

프로젝트 root 디렉터리로 이동한 뒤

npm init -y
npm i --save react react-dom next
mkdir pages

뒤 /package.json에 다음과 같은 내용을 추가

{
  "scripts": {
    "dev": "next -p 3070"
  }
}

npm run dev 명령어를 통해 Next App을 빌드하고 브라우저에서 localhost:3070에 접속하면 다음과 같은 창이 뜬다.

다음 포스트부터는 Next.js App 개발 전에 미리 환경 설정을 하기 위해TypeScript, ESLint, Prettier 등을 세팅하는 글을 먼저 포스팅할 예정이다.