[Next.js] Next.js 특징, 프로젝트 초기 세팅

1. Next.js 시작하기

넥스트는 리액트 프레임웤이다. 라이브러리에 비해 기능도 다양하고 라이브러리 사용하지 않고도 많은 문제들을 해결할 수 있도록 설계해두어서 편리하게 개발이 가능하다.

Next.js의 특징

1. SSR

Next.js는 SSR을 지원한다. 이를 통해 SPA의 단점이었던 SEO문제가 해결이 되며, 같은 페이지 컴포넌트를 실행할 때 발생하는 무의미한 깜박거림(Flickering) 현상을 방지할 수 있다.

또한 SSR로 미리 생성해 둔 HTML을 그대로 렌더하기에 한층 더 빠르게 화면에 표현해줄 수 있다.

이외에도 Next.js와 Next.js의 개발사인 Vercell에서 제공하는 Next/image, CDN, Edge Computing 등의 라이브러리와 기법들이 존재하는데 이를 통해 강력한 성능 최적화를 기대할 수 있다.

2. 라우팅

Next.js는 File Based Routing을 제공해준다. 이로 인해 HTML파일들을 a태그를 통해 파일 베이스 라우팅이 된것 처럼 손쉽게 라우팅이 가능한다. 따라서 기존 리액트 프로젝트에서 하던것처럼 라우터 파일에 라우팅을 직접 지정하는 작업이 필요없다.

3. FullStack 개발

Next.js에는 백엔드 개발을 할 수 있는 영역이 있다. (Client Side Server) 해당 클라이언트 서버를 통해 API도 만들 수 있고, 인증/인가, 밸리데이션 등의 다양한 백엔드 코드를 개발할 수 있다는 점이 특징이다.

Next.js 프로젝트 생성

npx create-next-app

리액트 프로젝트와 달리 /public 폴더에 index.html이 없는데, 이는 SPA에선 index.html 페이지 위에 js로 렌더링 해주는 형태였지만, Next.js의 경우 Client Server에서 파일 라우팅, 서버사이드 렌더링을 거친 뒤 브라우져로 서빙이 되기에 index.html파일이 필요가 없기 때문이다.

// @package.json
{
...
	"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
...
}

package.json의 scripts를 보면 dev, build, start가 있다. 각각 dev는 로컬서버를 통한 개발용 실행, build는 프로덕션용으로 build, start는 실제 최적화된 서버 시작이다.

npm run dev

npm run dev로 개발 서버를 시작해 로컬호스트를 들어가보면 샘플 페이지가 뜬다. 이는 pages폴더의 index.js파일의 내용이며, 소스보기를 하면 사진과 같이 서버사이드에서 프리렌더링이 완료 된 상태로 (HTML에 내용이 들어 있는 상태로) 브라우져에서 보여진다는걸 확인할 수 있다.

next.js 로 프로젝트를 시작하기만 했는데 벌써 SSR 프로젝트를 해본거다? 🤣