📖 들어가며 Next.js 14버전 app router 프로젝트의 styled-comoponents에서 vanilla-extarct로 마이그레이션을 진행함에 있어서 다크모드 기능도 같이 진행하게 되었습니다. 그리고 이번 다크모드를 적용하면서 next-themes를 활용해 봤는 데 사용 경험이 매우 좋았습니다. 또한, app router에서 vanilla-extract로 다크모드를 구현함에 있어서 참고자료가 많지 않다는 것을 깨달았기 때문에 글을 작성하려 합니다. 그럼 이제 Next.js app router에서 vanilla-extract + next-themes를 활용한 다크모드를 한번 구현해 봅시다. 🧐 next-themes 소개 https://github.com/pacocoursey/next-them..

📖 들어가며 기존 프로젝트에서 Next.js 14버전의 앱 라우터에서 styled-components를 사용하고 있었습니다. 이전에 Next.js 11버전에서 14버전으로 마이그레이션을 진행하면서 남아있던 부분이었습니다. 앱 라우터에서 서버 컴포넌트를 지원하기 시작하면서, 서버 컴포넌트 활용 해보고자 마이그레이션을 진행했습니다. 그럼 먼저 왜 마이그레이션을 진행했고, 왜 vanilla-extract를 선택했는지 간략히 설명해 볼게요. 🔍 앱 라우터(app router)에서 styled-components의 문제점 styled-components는 서버 컴포넌트를 지원하지 않기 때문에, styled-components를 사용하려면 'use client'를 명시함으로써 클라이언트 컴포넌트를 강제적으로 사용해..

📖 들어가며 Next.js 13 버전 이후에는 Rust 언어로 개발된 Turbopack이 도입되었습니다. Next 14 버전으로 마이그레이션을 진행하고 Turbopack으로 개발 환경을 실행했을 때 맞이한 문제에 대해서 정리해보려 합니다. 문제 발생 ❗ Turbopack으로 개발 환경을 실행하자 아래와 같이 오류가 발생했습니다. 이 오류에 대해 검색해 보니 "컴포넌트의 이름이 잘못되었거나, import 경로가 잘못 입력되었을 때 발생한다"는 설명을 찾을 수 있었습니다. 이에 따라 import 된 부분을 잘 확인해 보라는 조언이 있었습니다. 그러나, 제 코드에서는 import가 정상적으로 이루어졌기 때문에 수정할 부분이 없었습니다. 따라서 에러 메시지를 다시 확인해 본 결과 'DarkModeBtn' 컴포넌..

📖 들어가며 최근 Next.14 버전 app router로 마이그레이션을 진행하면서 카카오톡 공유하기 기능을 구현하는 데 있어서 변경된 부분과 여러 오류를 맞이하여 새롭게 포스팅합니다. 이전 포스팅에서 1번 ~ 1-3번까지는 방법이 동일합니다. 이전 포스팅을 참고해서 플랫폼 등록까지 하고 읽어주시면 감사하겠습니다. app router에서는 _document.tsx와 _app.tsx가 사라지고 이전에 해당 파일에서 작성되었던 코드는 layout.tsx에서 작성해주어야 합니다. 스크립트 컴포넌트 작성 카카오 디벨로퍼에서 플랫폼 등록을 완료했다면 이제 프로젝트로 돌아와서 적용을 해봅시다. 먼저 KakaoScript.tsx 파일을 생성하고 아래 코드를 생성합니다. 파일 위치는 프로젝트 구조에 맞게 생성하시면 됩..

📖들어가며 약 2년 전 Next.js(SSG) + TypeScript로 제작한 롤 MBTI 프로젝트를 14 버전으로 마이그레이션 한 과정 및 후기를 작성해보려 한다. 해당 글은 마이그레이션을 어떻게 하는 가에 대한 글이 아닙니다. 제목 그대로 마이그레이션을 하는 과정을 기록하는 글입니다. 마이그레이션을 왜 해야 했는가? 사실 서비스 자체로는 문제없이 잘 돌아가고 있었다. 대신에 Next.js로 직접 A - Z까지 해본 프로젝트는 롤 MBTI 프로젝트밖에 없었다. Next.js가 11버전에 비해 14 버전까지(특히 13 버전에서) 많은 부분이 변경이 되고, 어떻게 활용할 수 있는지 직접 부딪히며 깨달으며 학습하는 방식으로 지식을 흡수하는 나의 성향인 이유와 최신 버전으로 마이그레이션 하면서 기존 코드와는 ..

📖 들어가며 이 포스팅은 Next.js 11 버전(page router) 환경에서 작성된 글입니다. 13버전 이후 app router 환경에서 구현하는 방법은 이 포스팅에서 1 ~ 1-3까지만 보시고 여기를 참고해주세요. Next.js + Typescript 환경에서 토이 프로젝트를 진행하던 중 카카오톡으로 공유하기 기능이 필요해서 구현을 했었는데, 몇몇 오류도 마주치고 따로 정리를 하면 좋을 것 같아서 이렇게 정리하게 됩니다. 1. 애플리케이션 등록하기 일단 첫 번째로 개발하기에 앞서서 Kakao Developers에서 어플리케이션 등록을 해줘야 합니다. 1-1 로그인 사이트에 접속 해주시고 첫 화면에서 로그인을 해주시고 '내 애플리케이션'을 클릭해주세요. 1-2 애플리케이션 추가하기 그러면 이렇게 애..