최신 버전 (Latest version)
Next.js를 가장 최신 버전으로 업데이트하려면, 새롭게 도입된 upgrade 명령어를 사용하시면 됩니다. 정말 편리해졌죠! 여러분이 선호하는 패키지 매니저에 맞춰 아래 명령어 중 하나를 터미널에 입력해 보세요.
pnpm next upgradenpx next upgradeyarn next upgradebunx next upgrade💡 강사의 팁: > 예전에는
package.json에 들어가서 버전 숫자를 일일이 수정하고 다시 설치해야 했어요. 하지만 Next.js 팀에서 개발자 경험(DX)을 끌어올리기 위해 전용 명령어를 만들어 주었답니다. 이런 도구들을 적극 활용하면 개발 시간을 크게 단축할 수 있어요.
Next.js 16.1.0 이전 버전에서는 아직 이 upgrade 명령어를 지원하지 않아요. 그래서 대신 별도의 패키지를 사용해서 업데이트를 진행해야 한답니다:
npx @next/codemod@canary upgrade latest💡 강사의 팁: > 여기서 쓰인
codemod(코드모드)라는 단어, 앞으로 프론트엔드 생태계에서 정말 자주 보게 되실 거예요! 코드모드는 프레임워크나 라이브러리 버전이 크게 바뀔 때, 기존의 내 코드를 새 버전의 문법에 맞게 '자동으로 변환해 주는 스크립트'를 말합니다. 수동으로 다 바꾸려면 며칠이 걸릴 수도 있는 노가다를 명령어 한 줄로 싹 해결해 주는 마법 같은 도구죠.
만약 이런 자동화 도구를 쓰는 것보다 직접 수동으로 업그레이드하는 방식을 선호하신다면, 가장 최신의 Next.js와 React 버전들을 직접 설치해 주시면 됩니다:
pnpm i next@latest react@latest react-dom@latest eslint-config-next@latestnpm i next@latest react@latest react-dom@latest eslint-config-next@latestyarn add next@latest react@latest react-dom@latest eslint-config-next@latestbun add next@latest react@latest react-dom@latest eslint-config-next@latest카나리 버전 (Canary version)
최신 카나리(canary) 버전으로 업데이트하고 싶다면, 먼저 현재 사용 중인 Next.js가 최신 버전인지, 그리고 기존 기능들이 예상대로 잘 동작하는지 꼼꼼히 확인해 주세요. 확인이 끝났다면, 아래 명령어를 실행하시면 됩니다.
pnpm add next@canarynpm i next@canaryyarn add next@canarybun add next@canary💡 강사의 팁: > '카나리(Canary)'가 무슨 뜻일까요? 옛날 광부들이 탄광에 들어갈 때 유독가스를 감지하기 위해 카나리아 새를 데려갔던 것에서 유래한 소프트웨어 용어예요. '아직 정식 출시되지는 않았지만, 최신 기능이 가장 먼저 적용된 베타 테스트 버전'을 의미하죠. 새로운 기능을 남들보다 먼저 써보고 싶을 때 유용하지만, 아직 발견되지 않은 버그가 있을 수 있으니 메인 프로덕션 환경에서는 가급적 안정된
latest버전을 쓰는 걸 추천해요!
카나리 버전에서 사용 가능한 기능들 (Features available in canary)
현재 카나리 버전에서는 다음과 같은 흥미로운 기능들을 미리 만나보실 수 있어요:
인증(Authentication) 관련 기능:
💡 강사의 팁: > 이 기능들은 라우팅(페이지 이동) 단계에서 유저의 접근 권한을 매끄럽게 제어할 때 아주 유용합니다. 나중에 로그인한 사용자만 접근할 수 있는 마이페이지 등을 구현하실 때, 이 최신 파일 규칙들을 적용해 보세요. 면접관들에게 '단순히 코딩만 하는 게 아니라, 공식 문서의 최신 트렌드를 팔로우업하는 훌륭한 개발자'라는 깊은 인상을 심어줄 수 있을 겁니다.
버전별 가이드 (Version guides)
더 깊이 있고 자세한 업그레이드 지침이 필요하다면 아래의 버전별 가이드를 참고해 보세요.
- 버전 16 (Version 16)
- Next.js 애플리케이션을 버전 15에서 16으로 업그레이드하는 방법입니다.
- 버전 15 (Version 15)
- Next.js 애플리케이션을 버전 14에서 15로 업그레이드하는 방법입니다.
- 버전 14 (Version 14)
- Next.js 애플리케이션을 버전 13에서 14로 업그레이드하는 방법입니다.
💡 강사의 팁: > 실무에 투입되시면 처음부터 새 프로젝트를 만들기보다는, 이미 13이나 14 버전으로 만들어진 기존 프로젝트를 유지보수하거나 최신 버전으로 끌어올리는 업무를 자주 맡게 되실 거예요. 이때 이 '버전별 마이그레이션 가이드'는 여러분의 든든한 길잡이가 됩니다. 버전이 오르면서 기존 방식이 동작하지 않게 되는 '파괴적 변경사항(Breaking Changes)'이 무엇인지 꼭 체크하는 습관을 들이세요!
모든 문서에 대한 의미론적인 개요(Semantic overview)를 전체적으로 파악하고 싶으시다면, /docs/sitemap.md를 확인해 보세요.
사용 가능한 전체 문서의 색인(Index)이 필요하시다면, /docs/llms.txt를 참고하시면 됩니다.
💡 강사의 팁: > 마지막에 있는
llms.txt가 보이시나요? 최근 핫한 대형 언어 모델(LLM)이나 AI 도구들이 Next.js 문서를 더 잘 읽고 여러분의 질문에 정확히 답변할 수 있도록, Next.js 팀에서 AI 전용으로 텍스트를 정리해 둔 파일이에요. 프론트엔드 생태계가 얼마나 빠르게 발전하고 있는지 보여주는 재미있는 포인트죠!
