Next.js로 기술 블로그 만들기어느덧 Next.js를 공부한지도 7주차가 되었다.처음에는 단순히 React에서 한 단계 더 나아가기 위해 Next.js를 공부하기 시작했지만, App Router, Server Component, 파일 기반 라우팅, SEO, 정적 생성 같은 기능들을 하나씩 배우다 보니 이 기술을 활용해서 직접 하나의 프로젝트를 만들어보고 싶다는 생각이 들었다. 그러던 중 단순히 기능을 구현하는 프로젝트가 아니라, 나 자신을 보여줄 수 있는 사이트를 만들어보면 어떨까 하는 생각이 들었다.지금까지 공부한 내용, 진행했던 프로젝트, 문제를 해결했던 과정, 프론트엔드 개발자로 성장해가는 기록들을 한곳에 모아두면 좋겠다고 생각했다. 기존에는 Tistory에 내용을 정리했지만, Tistory에서..

Next.js 스타일링 전략: Tailwind CSS, shadcn/ui, 그리고 CSS-in-JS 이슈 직접 실험해보기Next.js App Router 환경에서는 스타일링 도구를 선택할 때 단순히 “디자인을 어떻게 입힐 것인가”만 보면 부족합니다. Server Components, Client Components, SSR, Streaming, 하이드레이션, 번들 크기, 스타일 삽입 시점까지 함께 고려해야 합니다. 특히 App Router에서는 기본적으로 Server Components를 적극적으로 활용할 수 있기 때문에, 스타일링 방식이 서버 렌더링 흐름과 잘 맞는지 확인하는 것이 중요합니다.이번 글에서는 Tailwind CSS와 shadcn/ui를 활용해 UI 컴포넌트를 구현해보고, Styled-Co..

Next.js에서 인증이 중요한 이유Next.js에서 인증이 조금 까다롭게 느껴지는 이유는 단순히 “로그인 여부를 확인하는 코드”만 작성하면 끝나는 구조가 아니기 때문입니다. Next.js는 Server Components, Client Components, Route Handlers, Server Actions, Proxy 등 여러 실행 지점을 가지고 있고, 각각의 코드가 실행되는 위치가 다릅니다. 어떤 코드는 서버에서만 실행되고, 어떤 코드는 브라우저에서 실행되며, 어떤 코드는 사용자의 요청이 페이지에 도달하기 전에 먼저 실행됩니다. 그래서 Next.js에서 인증을 설계할 때는 “로그인 상태를 어디에 저장할 것인가”, “서버 컴포넌트에서 세션을 어떻게 읽을 것인가”, “클라이언트 컴포넌트에서는 사용자..

Next.js 데이터 페칭과 Server Actions이 글에서는 Next.js에서 제공하는 데이터 페칭 방식과 Server Actions를 중심으로,실무에서 어떻게 활용해야 하는지까지 함께 정리해보겠습니다. React 개발을 처음 시작했을 때, 대부분의 데이터 페칭은 이런 형태였습니다.useEffect(() => { fetch('/api/posts') .then(res => res.json()) .then(data => setPosts(data));}, []);컴포넌트가 마운트된 뒤에야 요청을 보내고, 로딩 상태를 따로 관리하고, 에러 처리도 별도로 해야 했습니다.이 패턴 자체가 나쁜 것은 아니지만, 한 가지 근본적인 한계가 있었습니다. 바로 데이터 페칭이 클라이언트에 종속되어 있다는 점입..

렌더링 전략 완전 이해 - SSG, ISR, PPR, Cache ComponentsNext.js App Router에서 렌더링 전략은 단순한 기술 선택이 아니라,서비스의 성능, 사용자 경험, 데이터 최신성을 결정하는 핵심 설계 요소입니다.특히 최근에는 페이지 단위가 아니라컴포넌트 단위로 렌더링 전략을 조합하는 방식이 중요해졌습니다.이 글에서는 각 전략을 단순 개념이 아니라실제 서비스에서 어떻게 활용되는지 중심으로 설명드리겠습니다. SSG — 변하지 않는 영역을 담당하는 전략SSG는 빌드 시점에 HTML을 미리 생성하여 사용자에게 제공합니다.즉, 요청 시 서버 연산이 발생하지 않으며, 이미 만들어진 결과를 전달하는 방식입니다.이 방식은 특히 변하지 않는 콘텐츠에서 강력한 성능을 제공합니다.예를 들어 블로그..

Next.js의 App Router는 단순히 페이지를 이동시키는 도구가 아닙니다.기존의 라우팅 방식과는 달리, URL 구조 / UI 구조 / 사용자 경험 / 요청 흐름까지 하나의 시스템으로 통합하여 설계할 수 있도록 만들어진 구조입니다.특히 Next.js 13 이후 도입된 App Router와, Next.js 16에서 변경된 proxy.ts 개념까지 이해하면단순한 프론트엔드 개발을 넘어 애플리케이션 구조를 설계하는 관점을 가질 수 있게 될 것입니다.App Router를 바라보는 관점기존 React 프로젝트에서는 React Router를 사용하여 다음과 같이 라우팅을 구성했습니다.path를 코드로 선언컴포넌트 단위로 페이지 구성로딩/에러 상태를 각 컴포넌트에서 직접 처리하지만 App Router는 접근 방..

프론트엔드 개발을 하다 보면 한 번쯤 이런 말을 듣게 됩니다.“CSR은 느리고 SSR은 빠르다”“SEO 때문에 SSR을 써야 한다”“Next.js는 SSR 프레임워크다”“use client를 붙이면 클라이언트 컴포넌트다”하지만 이런 말들은 절반은 맞고 절반은 틀린 이야기입니다.렌더링 방식은 단순히 “빠르다 / 느리다”로 나눌 수 있는 문제가 아니기 때문입니다.이번 글에서는 CSR과 SSR을 단순 개념 비교에서 끝내지 않고 다음 흐름까지 연결해서 이해해보겠습니다.브라우저가 화면을 보여주는 과정하이드레이션(Hydration) 비용SEO와 검색 엔진 크롤러 관점React Server Components렌더링(Rendering)이란 무엇인가렌더링(Rendering)은 사용자가 볼 수 있는 HTML UI를 만들어..