Next.js 기본 설명, 사용법

🔍 Next.js란?

Next.js 는 리액트의 프레임워크이다.

리액트는 기본적으로 SPA이며, CSR (Client Side Rendering) 방식으로 브라우저를 렌더링한다.

CSR vs SSR 정리글

순수 리액트로도 SSR을 구현할 수는 있지만 난이도가 어렵고 번거롭다.

하지만 Next.js를 이용하면 리액트에서 SSR을 쉽게 구현할 수 있다.

쉽게 말하자면 Next.js를 이용하면 SSR 과 CSR의 장점 두가지를 다 이용할 수 있는 것이다.

🔍 Next.js 사용법

npx create-next-app [프로젝트명] --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

npm install next@12.1.6  // 12버전을 사용하려면 다시 버전 재설치

프로젝트 파일들이 생겼다.

npm run dev

후에 localhost:3000에 접속하면 메인페이지가 나온다.

Next.js 13 버전

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