폰트를 설정하는 방법은 크게 두 가지가 있습니다.1. 구글 폰트 사용하기구글 폰트는 next/font/google에서 원하는 폰트를 불러와 사용할 수 있습니다.필요한 폰트, 서브셋(subsets), 두께(weight), 그리고 디스플레이(display) 옵션을 지정할 수 있습니다.const notoSans = Noto_Sans({ weight: ['400', '700'], subsets: ['latin'], display: 'swap',});subsets: 폰트가 지원하는 문자셋을 선택합니다.weight: 400(보통)과 700(굵은)을 적용해 다양한 weight을 지원합니다.display: swap으로 설정해, 폰트가 로드되지 않은 상태에서도 텍스트가 표시되며, 로드 후 폰트가 교체됩니다.2. 로..

SSG -> ISR 으로 전환하기SSG는 빌드 시점에 정적 HTML을 생성하는 방식입니다.하지만 ISR로 전환하면, 정적 페이지의 성능을 유지하면서도 주기적으로 데이터를 새로 가져와 페이지를 업데이트할 수 있습니다.ISR로 전환하려면 revalidate 옵션을 추가하여 페이지가 일정 시간마다 다시 생성되도록 설정할 수 있습니다.// 3초마다 페이지 재생성export const revalidate = 3;Next.js에서 fetch 사용하기: SSG, ISR, SSR 결정하기Next.js에서는 서버 컴포넌트에서 fetch를 사용할 수 있습니다. fetch 함수는 두 번째 옵션에 따라 SSG, ISR, SSR 방식을 결정합니다.1. SSGfetch 호출 시 두 번째 옵션을 제공하지 않는다면, 기본적으로 SS..

https://nextjs.org/docs/app/building-your-application/rendering/client-components Rendering: Client Components | Next.jsLearn how to use Client Components to render parts of your application on the client.nextjs.org Next.js에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트입니다.별도로 설정하지 않으면 컴포넌트는 서버에서 실행되며, 예를 들어 console.log를 사용할 경우 콘솔이 브라우저 콘솔이 아닌 서버 터미널에 출력됩니다.이는 서버 컴포넌트가 서버에서 실행되기 때문에 발생하는 현상으로, 브라우저는 서버에서 렌더링된 HTML만 ..

https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts Routing: Pages and Layouts | Next.jsCreate your first page and shared layout with the Pages Router.nextjs.org React에서는 라우팅을 설정할 때 react-router-dom 같은 라이브러리를 주로 사용하지만, 반드시 이 라이브러리를 사용할 필요는 없고, 원하는 방식으로 자유롭게 라우팅을 설정할 수 있었습니다.반면, Next.js는 프레임워크이기 때문에 정해진 라우팅 방식을 사용해야 합니다.Next.js에서는 별도로 라우터를 설정하는게 아닌 폴더 및 파일 구조에 따라 자동으..

https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.jsCreate a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.nextjs.org이번 글에서는 npx create-next-app@latest를 사용하여 Next.js 프로젝트를 설치하는 과정과 주요 프로젝트 구조를 간략하게 작성하겠습니다.설치 과정 및 설정npx create-next-app@latest # Next.js 최신 버전 프로젝트 생성 명령어 실행✔ What is..

Next.js 란?Next.js는 리액트를 기반으로 웹 애플리케이션을 개발하기 위한 프레임워크입니다.리액트는 컴포넌트 단위로 UI를 구성하며 주로 단일 페이지 애플리케이션(SPA)과 클라이언트 사이드 렌더링(CSR)을 사용합니다.그러나 리액트만으로는 SEO 최적화, 초기 로딩 속도, 서버 측 렌더링 등 다양한 요구 사항을 해결하기에 한계가 있는데, Next.js는 이를 보완하여 다양한 렌더링 방식을 제공합니다.서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR)을 모두 지원하며, 이들을 결합한 하이브리드 렌더링으로 성능 최적화와 SEO 개선을 동시에 이룰 수 있습니다.이러한 기능 덕분에 Next.js는 복잡한 웹 애플리케이션뿐만 아니라, 서버와 클라이언트를 모두 다..