메로그

개요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 폴더,..

SEO 최적화를 위해서는 robots.txt, sitemap.xml 을 생성해주어야 합니다.robots.txt 는 사이트에 크롤링을 할 대상을 알려주는 파일입니다.sitemap.xml 은 검색엔진에 색인할 모든 페이지를 나열한 XML 파일입니다. robots.txt 만들기Nextjs 14 에서는 app/robots.ts 파일을 만들면 됩니다. 그러면 ts 파일이 txt 파일로 만들어져 /robots.txt 로 접근이 가능해집니다.import { MetadataRoute } from 'next' export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: '*', allow: '/', ..

웹 개발에서 메타 데이터는 매우 중요합니다.메타 데이터는 SEO 향상, 사용자 경험 개선 등 아주 도움이 되므로 매우 중요합니다.메타 데이터를 정적, 동적으로 설정하는 방법을 알아봅시다! 정적 설정layout.tsx, page.tsx 에서 아래와 같이 셋팅하면 정적으로 셋팅할 수 있습니다.import { Metadata } from 'next' // 정적 메타 데이터export const metadata: Metadata = { title: 'Hello world',} 만약에 자바스크립트를 사용하고 계신다면, metadata 만 export 해주면 됩니다.export const metadata = { title: 'hello world',} 동적 설정동적 설정 또한 layout, page 에서 할 수..