메로그

개요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 = (..

구글 서치 콘솔에 등록시에 하위 도메인까지 모두 설정하고 싶은 경우가 있다.그런 경우에는, 도메인 기반으로 등록하면 된다.등록 방법아래의 이미지에서 도메인을 등록하면 모든 서브도메인과 프로토콜(http, https)에 걸친 모든 페이지가 포함되어 검색하게 됩니다.그래서 상위 도메인의 경우, 설정해서 최종 결과물을 보는 방법이 있습니다.그렇다면, 하위 서브도메인의 경우, 독자적인 결과물을 알아야할 필요가 있기 때문에 도메인에 서브 도메인을 입력해서 해도 되지만, URL 접두어를 이용해 등록해도 됩니다. 애는 URL 전체를 입력하여 한정된 데이터를 추적하여 독립적으로 관리하고 분석할 수 있습니다.sitemap.xml, robots.txt 의 경우, URL 접두어를 사용하면 일반적으로 거의 바로 등록이 되는 ..

pnpmnpm 의 설치속도를 개선하기 위해 yarn 을 도입했지만, yarn 또한, 마찬가지로 의존성 설치하는데 비슷한 현상이 발생하기 시작했습니다.패키지 매니저 변경이 필요했는데, pnpm 이 눈에 띄웠고 캐싱된 의존성을 보기 때문에 로컬에 설치한 의존성이 있다면, 로컬 환경에 더 빠르게 설치가 가능해집니다. 그래서 pnpm 을 도입해보았습니다.설치우선 pnpm 을 사용하기 위해서는 pnpm 을 설치해줍시다.별다른 노드 관리자를 쓰지 않으면 아래와 같이 pnpm 을 설치하면 됩니다.npm install -g pnpmgtihub action 에 deploy.yml 만들기상용에 배포시에는 devDependencies 가 포함되지 않도록 pnpm install --frozen-lockfile --prod 명..

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