[노마드코더] #1 Create Next App

Why Next.js?

React.js는 원할 때 가져다 쓸 수 있는 라이브러리이며,

Next.js는 정해진 틀 안에서 커스터마이징하는 React 기반 프레임워크이다

• Create React App으로 생성되는 CSR(Client Side Rendering) 프로젝트는 UI를 가져올 때 React 및 JavaScript 코드를 실행하며 약간의 딜레이가 생긴다
• 반면 Next.js로 생성되는 SSR(Server Side Rendering) 프로젝트는 유저가 매우 느린 연결을 사용해도 미리 생성된 HTML 코드를 바로 보여준다 (= Static Pre Rendering) 이후 React가 실행되며 HTML이 React 컴포넌트가 된다 (= hydration)
• 이 경우 검색엔진에서 파악하기 용이해 SEO(Search Engine Optimization)에도 유리하다!

 

Create Next App

명령어를 입력해 Next.js 프로젝트를 생성해보자

npx create-next-app@latest
# or
yarn create next-app

타입스크립트를 사용하는 경우는 다음과 같다

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

다음 명령어로 실행할 수 있다

npm run dev
# or
yarn dev

error - Failed to load SWC binary for win32/x64

해당 오류가 발생한다면 최상단에 .babelrc 파일을 생성하고 다음과 같이 넣어 컴파일러를 변경해주자

{
  "presets": ["next/babel"]
}

* 이 경우 SWC 컴파일러를 사용하지 못하지만 이거 말고는 해결책을 모르겠다 ㅜㅜ

Next failed to load SWC binary

실행된다면 localhost:3000에서 해당 화면을 확인할 수 있다

 

본 내용은 노마드코더의 'NextJS 시작하기'를 바탕으로 작성되었습니다