[Next.js] Next.js 시작하기

🤔 Next.js란?

단일 페이지의 자바스크립트 애플리케이션을 만드는 것이 꽤나 어려운 일이라는 것을 다들 알고 있을 것이다. 다행히도, 우리에게는 다양한 선택지의 프레임워크와 라이브러리가 있다.

그럼에도 불구하고 원하는 애플리케이션을 만들 수 있기까지는 상당한 러닝커브가 있다. 우리가 배워야 할 것들은 CSR(Client Side Rendering), 페이지 레이아웃, API 등이다. 그것만 있는가? 특정 페이지는 SSR(Server Side Rendering)이 필요할 수 있다.

따라서 우리는 더 간단하지만, 수정하기 쉬운 어떤 것이 필요하다.

PHP를 이용했을 때, 웹 앱이 어떻게 만들어지는 지 생각해보자. 파일을 만들 것이고, PHP 코드를 작성하고, 간단하게 배포하면 된다. 라우팅에 대해서 그렇게 걱정할 필요가 없다. 그리고 앱은 서버에서 기본으로 렌더링된다.

위에 언급한 것들이 PHP대신, Next.js로 할 수 있는 것들이다. 우리는 자바스크립트와 리액트로 앱을 만든다. 아래 언급할 것들이 Next.js가 제공하는 쩌는 기능들이다.

✨ Next.js의 기능들

• 다이나믹 라우트를 이용한 직관적인 페이지 기반의 라우팅 시스템
• 자동으로 페이지를 최적화
• 데이터 요구사항 차단과 함께 서버에서 랜더링
• 빠른 페이지 로딩을 위해 자동으로 코드 스플릿팅
• 최적화된 페이지 프리페치를 사용한 클라이언트 라우팅
• HMR(Hot Module Replacement)을 지원하는 Webpack 기반의 개발 환경
• 페이지에 사용되는 것과 동일한 간단한 라우터를 사용하여 서버리스 기능으로 API를 구축하기 위한 API 라우트
• 커뮤니티 플러그인과 고유한 Babel 및 Webpack 구성으로 사용자 지정 가능

자 이제 Next.js를 시작해보자!