NEXT.js
1.Next.js
: React에 없는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG, Static Site Generation), 증분 정적 재생성(ISR, Incremental Static Regeneration) 등 다양한 기능을 제공하는 React를 위한 프레임워크출처
2.Next.js 프로젝트 세팅 & 기초
1. 프로젝트 생성 프로젝트를 생성하면 pages, public, styles 폴더를 확인할 수 있다. Next.js 앱에 index.html이 없는 이유 Next.js 앱은 일반 React 앱과 똑같이 public 폴더를 가지고 있으며, 이 폴더는 정적인 파일을
3.Next.js 정적 사이트 생성(SSG) & 서버 사이드 렌더링(SSR)
Next.js는 서버 측 렌더링(SSR)을 지원하여 기본적으로 모든 페이지를 사전에 렌더링(pre-render)한다. 서버 사이드 렌더링은 페이지의 HTML 마크업을 미리 생성하여 클라이언트에 전달하는 방식이다.이로 인해 Next.js 애플리케이션은 브라우저로 전송되는
4.Next.js - API 엔드포인트 생성 & MongoDB 연결
Next.js에서는 pages/api 폴더를 사용하여 API 엔드포인트를 생성할 수 있다.pages/api 폴더 안에 있는 JavaScript 파일들은 API 라우트로 간주되며, 해당 파일들의 이름 = 엔드포인트 경로가 된다.예를 들어, pages/api 폴더 안에 u
5.Next.js - MongoDB에서 데이터 가져오기
이제 홈 화면에서 더미 데이터가 아닌 MongoDB 데이터베이스에 있는 데이터들을 가져와서 보여주도록 하자. 이 작업 또한 새로운 API 라우트를 생성하고 handler 함수를 작성하여, API를 이용해 데이터를 fetch해오도록 할 수 있지만.. 이 방식은 불필요한
6.Next.js - head 메타 데이터 추가하기 & Vercel 배포
Next.js는 페이지마다 head 요소를 추가하고 메타 데이터를 추가할 수 있다.Next.js에서 제공하는 특수한 컴포넌트인 <Head> 컴포넌트를 import한다.원하는 페이지에 <Head> 컴포넌트를 추가하고, 그 안에 필요한 태그들을 작성하면 된다.&