Next.js란

Next.js란 무엇이고, 왜 사용할까요?

Next.js는 웹 개발자에게 필요한 다양한 기능을 제공해주는 리액트 프레임워크

특징

- 개발 환경 설정이 쉽고 간단하다.
- SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다.
- 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다.
- vercel을 통해 쉽게 배포가 가능하다.
- 간단한 api를 쉽고 간단하게 만들수있다.

프로젝트 실행

bash npx create-next-app

기본 구조 및 기능

// package.json
...
"scripts": {
    "dev": "next dev", <= 개발 모드로 프로젝트를 실행
    "build": "next build", <= 제품 배포 용도로 프로젝트를 빌드
    "start": "next start", <= uild를 통해 만들어신 프로젝트를 실행하는 명령어. 실제 운영 서버에서 배포되는 환경과 동일.
    "lint": "next lint"
  },
...

처음 보이는 _App.js가 특이하게 보일것이다. 파일명 앞에 언더바가 자리하고 있기 때문이다. 파일에 들어가서 보면

이런식의 구조를 가지고 있다.

import "./globals.css";

function MyApp({ Component, pageProps }) { <= 넥스트프로젝트에서 실제로 실행되는 페이지다.
  return <Component ponent {...pageProps} />;
}

export default MyApp;

코드를 보면 이런식으로 나와있는데 해석을 해보자면

• 각각의 페이지가 렌더링 될 때 가장 먼저 실행되는 파일
• 활용 예시
  • 공통된 레이아웃 페이지 작성
  • 글로벌 CSS 적용