Next.js란?

1. Next.js란

JavaScript 및 React를 기반으로하는 웹 프레임워크이다. Vercel에서 개발되었으며 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG), 그리고 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)을 쉽게 구현할 수 있게 해준다.

 

Next.js의 주요 특징 및 기능
1. 서버 사이드 렌더링 (SSR): React 기반 앱에 서버 사이드 렌더링을 간편하게 추가할 수 있다. 이를 통해 초기 페이지 로드 속도를 향상시키고 SEO를 개선할 수 있다.
2. 정적 사이트 생성 (SSG): Next.js를 사용하면 각 페이지를 미리 빌드하여 정적 자원으로 제공할 수 있다. 이로 인해 빠른 페이지 로딩 속도와 향상된 사용자 경험을 제공할 수 있다.
3. API 라우트: pages/api 폴더에 파일을 추가함으로써 간단한 API 엔드포인트를 생성할 수 있다.
4. 파일 기반 라우팅: pages 디렉토리 안에 파일을 추가함으로써 자동으로 라우트가 생성된다.
5. 빠른 개발 환경: Hot Module Replacement (HMR)를 내장하여 파일을 저장할 때마다 자동으로 페이지를 새로 고친다.
6. 통합된 스타일링: Next.js는 스타일드 컴포넌트나 Emotion과 같은 다른 라이브러리와 잘 작동하며, 자체적으로 styled-jsx를 내장하고 있다.
7. 플러그인 및 커뮤니티 지원: Next.js는 다양한 플러그인과 함께 사용될 수 있으며, 커뮤니티에서도 활발하게 지원받고 있다.

이러한 기능들 덕분에 Next.js는 React 앱을 구축하고 배포하는 과정을 매우 단순화시켜준다. 다양한 크기와 복잡도의 프로젝트에서 유용하게 사용될 수 있다.

 

셋팅.

비쥬얼 스튜디오에서 빈 파일을 만든 후 열기

비쥬얼 스튜디오 터미널에  npx create-next-app@latest . 입력

입력이 끝나면 위와 같이 나온다. 필요한 부분에 yes or no를 선택 후 만든다.

그리고 실행을 할 경우 

yarn 이면 yarn dev

npx는 npx run dev 로 실행하면 된다.

 

배포를 할 때 실서버에 최적화된 버젼이 필요하다.

build - 실서버를 위한 배포판을 만드는 명령어

npm run build

start - 배포판을 서비스하는 명령어

npm run start

 

배포판 서비스하게 되며 좀 더 슬림하게 된다. 

 

309 kB resources처럼 기존 보다 더 가벼워진다.

이건 기존 npm run dev로 했을 때이다.