유리의 개발새발

📚 Page Router로 Next.js를 한 번 훑어봤다이제 Page Router 기반으로 Next.js를 한 바퀴 돌았다.직접 써보니까 어떤 장점과 단점이 있었는지 정리해보자. ✅ 장점pages 폴더만으로 라우팅이 자동으로 설정된다pages/ 디렉토리 구조만 잘 잡으면별도의 라우팅 설정 없이 경로가 자동으로 매핑된다.[id].tsx, [slug].tsx 같은 동적 라우팅도 매우 쉽게 구현할 수 있다.다양한 렌더링 방식을 지원한다SSR, SSG, ISR 등 상황에 따라 렌더링 전략을 선택할 수 있다.물론 이걸 현업에서 잘 쓰려면 조금 익숙해져야 하긴 할 것 같다. 하지만 뭐 어쩌겠는가. 도태되지 않으려면 써야죠.❌ 단점써보면서 이런 건 좀 불편하더라페이지마다 레이아웃 설정이 번거롭다공통 레이아웃을 적..

☁️ EC2? 아니, 이제는 Vercel 씁니다우리는 EC2 안 씁니다.Next.js 만든 애들이 만든 Vercel 씁니다.그냥 Next.js랑 찰떡궁합이고, 배포도 쉽고 빠름.https://vercel.com Vercel: Build and deploy the best web experiences with the AI Cloud – VercelVercel gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com회원가입 먼저 하세요.GitHub 계정으로 하면 편합니다. ✅ 터미널에서 준비프로젝트 디렉토리로 이동해서sudo npm install -g verce..

import Head from "next/head";export default function HomePage() { return ( 이곳은 제목입니다 {/* 실제 페이지 내용 */} ... );}Search Engine Optimization검색 엔진 최적화를 위해 각 페이지마다 title, description, OG 태그를 다르게 넣고 싶을 때가 많죠. ✅ 그럴 때 쓰는 게 next/headNext.js에서는 next/head를 이용해서JSX 안에서 페이지마다 커스텀 태그를 삽입할 수 있습니다. 이러면 끝인가? ㄴㄴ어떤 방식으로 렌더링이 되고있죠?❌ next..

SSR, SSG에 이어… 이번엔 ISR!앞서 SSR(Server Side Rendering)과 SSG(Static Site Generation)에 대해 알아봤죠.이번에는 이 둘의 중간 어딘가쯤 위치한 **ISR(Incremental Static Regeneration)**을 알아보겠습니다.직역하면 “증분 정적 재생성”인데,한글로 풀어 써도 어렵네요. 하지만 걱정 마세요. 개념은 정말 간단합니다.ISR이란?한마디로 말하면,정적 페이지(SSG)인데, 일정 주기로 다시 만들어주는 기능입니다. 예를 들어, SSG는 빌드 타임에 HTML을 미리 만들어두기 때문에 빠르긴 하지만,실시간 데이터가 반영되지 않는다는 단점이 있죠.여기서 ISR은 말합니다.“야, 처음엔 정적으로 만들어줄게.근데 일정 시간 지나면 새로 만들..

Next.js에서 SSR(Server Side Rendering)은 가장 기본적인 렌더링 방식입니다.사용자가 페이지에 접속하면, 서버는 실시간으로 데이터를 불러오고, 그 데이터를 기반으로 HTML을 생성한 뒤 사용자에게 전달합니다.하지만 만약 데이터를 가져오는 API 서버가 물리적으로 멀리 떨어져 있거나(예: 아프리카에 위치한 서버), 혹은 가져와야 할 데이터 양이 많아 시간이 오래 걸린다면, 사용자는 페이지가 로딩될 때까지 그만큼 기다려야 합니다.즉, 서버 응답이 느려지면 사용자 경험도 함께 저하되는 것이죠.그렇다면 어떻게 해야 할까요?이럴 땐 SSR 대신 SSG(Static Site Generation) 방식을 사용하는 것이 좋습니다.SSG는 페이지를 빌드 시점에 미리 정적으로 생성해두는 방식으로, ..