최근 공개된 Next.js 16.3 프리뷰 소식 보셨나요? 이번 업데이트는 그야말로 'AI 에이전트를 위한 웹 프레임워크'라는 방향성이 아주 뚜렷하게 느껴지네요. 특히 Cursor나 Claude Code 같은 도구를 쓰시는 분들에게 유용한 기능들이 대거 추가되었습니다.

가장 흥미로운 점은 AGENTS.md 규격을 공식적으로 활용하기 시작했다는 겁니다. create-next-app으로 프로젝트를 만들면 자동으로 이 파일이 생성되는데요. 개발 서버를 켤 때 AI 에이전트가 탐지되면, node_modules/next/dist/docs/ 경로에 로컬로 담겨 있는 정확한 버전의 프레임워크 문서를 먼저 읽도록 유도합니다. Vercel 내부 평가에 따르면, 에이전트가 필요할 때 검색 도구를 호출하게 만드는 것보다 이렇게 로컬 문서를 바로 쥐어주는 방식이 훨씬 오동작을 줄여주어 100%의 성공률을 보였다고 하네요 ㅎㅎ

여기에 개발 서버 내부를 에이전트에게 통째로 연결해 주는 next-devtools-mcp 기능도 아주 매력적입니다. 에이전트가 에러 로그를 읽고 라우팅 맵을 조회해 알아서 문제를 디버깅하게 만들 수 있어요. 설정도 생각보다 아주 간단합니다. 로컬이나 글로벌 .mcp.json 파일에 아래 설정을 복사해 넣기만 하면 준비 끝입니다.

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

여기에 덧붙여 기존 next-browser CLI가 agent-browser 라이브러리로 통합되면서, 에이전트가 헤드리스 크롬과 리액트 개발자 도구까지 직접 활용할 수 있게 되었습니다. 에러 원인을 찾기 위해 터미널에 npx skills add vercel-labs/next-browser 명령어를 입력하고 에이전트에게 React 컴포넌트 트리를 뜯어보라고 시킬 수도 있죠. 번거롭게 코드를 하나하나 에이전트에게 직접 붙여넣지 않아도 되니 개발 경험이 정말 쾌적해질 것 같습니다~ ㅎㅎ