메로그

현 프로젝트에서 Nextjs14 를 사용하고 있었는데, Nextjs15 의 안정적 버전이 나와 이번에 마이그레이션을 진행했습니다. 우선적으로 크게 바뀐 것은 동기 API 들이 비동기로 변경되었고, page, layout 에서 사용되는 params 또한 비동기로 변경되었습니다.그래서 간단하게 변화 부분에 대한 내용과 새롭게 추가된 내용을 간략하게 정리하겠습니다.🚀 Next.js 15 업그레이드Next.js 15 버전이 출시되면서 많은 주요 변경 사항과 새로운 기능들이 추가되었습니다. React 19 지원과 비동기 API 변화 등 프로젝트에 큰 영향을 줄 요소들이 많으므로, 이번 포스팅에서는 Next.js 15 업그레이드에 필요한 가이드와 새 기능을 최대한 쉽게 설명드리겠습니다.1. Next.js 15 업..

Nextjs14 에서 타사 라이브러리 사용하기해당 라이브러리를 활용하여 타사 라이브러리를 쉽고 빠르게 사용할 수 있는 라이브러리 입니다.이를 이용해서 GTM, GA 를 Nextjs 에서 적용해봅시다.@next/third-parties 라이브러리 설치해당 라이브러리는 인기있는 타사 라이브러리를 로딩할 때 성능과 개발자 경험을 개선하기 위한 라이브러리로 현재 v14.2.15 에서도 아직 활발하게 개발 중인 실험적 라이브러리입니다.npm install @next/third-parties@latest next@latestpnpm, yarn 을 쓰시는 분들은 맞는 문법으로 다운받으시면 됩니다. 필자는 pnpm 썻음.GTM, GA 연동해보기구글 태그 매니저(GTM)과 구글 애널리틱스(GA) 를 연동하기 위해서는 @..

개요Nextjs 에 자체 내장된 서버사이드를 이용해서 api 를 만들었는데 해당 api 를 사용시에 cors 가 발생하는 문제가 있습니다.해결방법으로 next.config.js 와 middleware 를 이용한 방법이 있는데, 필자는 config 에 선언한게 좀 더 직관적이여서 config 에 사용했음.하지만, 두가지 다 알려드리도록 하겠습니다.next.config.js 를 이용한 방법cors 를 config.js 에서 하면 객체 형식으로 관리하기 떄문에 좀 더 관리하는데 직관적인 장점이 있습니다.// next.config.jsconst nextConfig = { async headers() { return [ { source: "/api/:path*", head..

서버서버에서 현재 URL 정보를 가져오는 방법import { headers } from 'next/headers'export default async function Page() { const headersList = headers() const domain = headersList.get('host') const fullUrl = headersList.get('referer') return ( Domain: {domain} Full URL: {fullUrl} )}클라이언트클라이언트에서 가져오는 방법'use client'import { usePathname, useSearchParams } from 'next/navigation'export default func..

Nextjs 를 이용해서 api 통신을 할 때, 보안적인 문제 또는 외부에 있는 api 와 연결시에 주로 사용합니다.참고로 Nextjs 에서는 pages/api 폴더 아래에 api 가 매핑되고 처리됩니다. 서버측 번들로만 구성되며, 클라이언트 측 번들 크기를 늘리지 않습니다.API 경로 관리절대 경로 사용: 서버 간 통신 시에는 절대 경로를 사용해야 합니다. 특히 외부 API를 호출하거나 내부 API 경로를 사용할 때, 상대 경로 대신 절대 경로를 사용해야 서버가 올바르게 요청을 처리할 수 있습니다.서버에서 사용시에는 NEXT_PUBLIC_ 을 붙이지 않아도 됩니다.const endpoint = `${process.env.BASE_URL}/api/some-endpoint`;const handler = (..

Nextjs14 를 사용하면서 권장하는 폴더 및 라우팅 구조는 기본적으로 App Router 를 기반으로 움직이도록 변경되었습니다.따라서 많은 폴더 아키텍쳐들이 나오고 있는데, 여러 프로젝트를 시도하고 나서 어느정도 정리된 개인적인 Nextjs14 폴더 구조를 소개할려고 합니다.해당 구조는 협업을 위한 구조이며, 실제로 실무에서 도입하여 현재 사용하고 있는 폴더 아키텍쳐 입니다.구조기본적으로 app 폴더 아래 각 도메인 별로 page.ts, layout.ts, components/, types/, hooks/* 등 각 도메인별 기능들이 한 곳에 묶여서 지원되도록 합니다. 또한, app 폴더와 같은 레벨로 사용될 공통 기능들이 모여있는 common, 다양하게 사용할 수 있는 라이브러리 레벨에 lib 폴더,..