닷넷 개발자가 본 Next.js — 최근 방식으로 시작해본 기록
저는 21년째 닷넷 개발자로 일하고 있습니다. 오래 전에 Next.js를 사용하다가 문득 최근의 Next.js는 어떻게 변했을지 궁금해졌습니다. 공식 문서가 워낙 잘 되어 있지만, 오래전에 접하고 잊고 있었던 제 눈에는 생소한 부분이 많았습니다.
이 글은 그냥 시작해보고 정리한 기록입니다. 완벽한 튜토리얼이 아니라, 개발자가 React 생태계의 최신 도구를 접했을 때 느낀 점과 선택한 방식을 공유하려고 합니다.
왜 지금 Next.js인가
제가 손놓기 직전 Next.js는 App Router를 기본으로 채택하면서 구조가 크게 바뀌었습니다. Pages Router에서 App Router로의 전환은 단순한 업데이트가 아니라, 파일 시스템 기반 라우팅과 서버 컴포넌트를 기본으로 삼는 패러다임 변화였습니다. 저는 Asp.net의 서버 렌더링 방식에 익숙하기 때문에, React 서버 컴포넌트 개념이 부자연스럽게 다가왔습니다. 물론 자바스크립트 생태계는 익숙한 편이지만, 풀스택 서비스를 만들 때 Next.js가 주는 개발 경험이 꽤 괜찮다는 평가가 많아 다시 한번 해보기로 했습니다.
첫 프로젝트 생성 — create-next-app
최신 방식은 당연히 npx create-next-app@latest입니다. 프롬프트에서 TypeScript, ESLint, Tailwind CSS, App Router, import alias 등을 선택할 수 있습니다. 저는 모두 기본값으로 설정했습니다. 특히 App Router와 Tailwind는 공식 권장 사항이므로 그대로 따랐습니다. 설치가 끝나면 src 디렉터리 구조와 app 폴더가 생성됩니다. 이 구조는 전통적인 서버사이드 언어의 폴더 라우팅과 비슷한 느낌이라 크게 낯설지 않았습니다.
App Router의 기본 구조 이해
App Router에서 가장 중요한 개념은 layout.tsx와 page.tsx입니다. layout은 여러 페이지에 공통으로 적용되는 레이아웃이며, page는 실제 라우트의 내용을 담습니다. 예를 들어 app/posts/page.tsx는 /posts 경로의 페이지가 됩니다. 서버 컴포넌트가 기본이므로, 클라이언트 상호작용이 필요한 부분만 'use client' 지시어로 구분합니다. 저는 'use client'를 어디에 붙여야 할지 헷갈렸지만, SEO가 필요한 곳에만 서버사이드를 적용하고 기본값은 SPA로 한다는 원칙을 정하고 나니 조금 쉬워졌습니다.
데이터 가져오기와 서버 액션
Next.js 13 이후로 서버에서 직접 데이터를 가져오는 패턴이 자연스러워졌습니다. async function Page() 안에서 fetch를 호출하면 서버에서 실행되고, 그 결과가 HTML에 포함됩니다. 저는 이 방식이 Blazor의 OnInitializedAsync와 매우 유사하다고 느꼈습니다. 또한 서버 액션(Server Actions)을 이용하면 폼 제출이나 데이터 변경을 별도의 API 엔드포인트 없이 처리할 수 있습니다.
닷넷 개발자로서 느낀 점
몇 가지 실험을 해보면서 느낀 점을 정리합니다.
설정 파일이 많다: next.config.js, tsconfig.json, tailwind.config.js 등 Blazor에 비해 초기 설정 파일이 많습니다. 자바스크립트 생태계에 익숙하지 않다면, 꽤 어렵게 느껴질 수 있는 영역이라고 생각합니다.
서버 컴포넌트 기준: 'spa'를 기본으로하는 설계는 React.js와 유사성을 높여 이해하는데 도움이 됩니다. 다만, 클라이언트와 서버의 경계를 명확히 나누는 연습이 필요했습니다.
생태계가 넓다: React 생태계의 라이브러리 선택지는 매우 다양합니다. 반면 닷넷은 '이렇게 하면 된다'는 공식 가이드가 비교적 명확합니다. 선택의 폭이 넓다는 것은 장점이자 고민거리입니다.
앞으로 실험해볼 것들
현재 메리톡톡은 Asp.net에서 Nuxt.js로, 이제 다시 Next.js로 포팅해보면서 실제 운영 환경에서의 장단점을 확인해보려고 합니다. 특히 서버 액션과 ISR(Incremental Static Regeneration)이 혼자 운영하는 서비스에서 얼마나 실용적인지가 궁금합니다.
이 글은 Next.js를 처음 시작하는 분들에게 정답이 되려는 글이 아닙니다. 다만 저와 비슷한 관심을 가진 분이 최신 Next.js를 접할 때 어떤 부분을 주목하면 좋을지 기록해본 것입니다. 이 기록이 앞으로의 실험에 기준점이 되길 바랍니다.