끄적이는 개발노트

SEO 최적화?검색 엔진 최적화(Search Engine Optimization)의 줄임말웹사이트나 웹 페이지가 구글, 네이버와 같은 검색 엔진에서 더 잘 노출되기 위해 검색 결과를 높이고 더 많은 방문자를 얻는 과 이를 위해서는 기본적으로 페이지 개발 단에서 고려할 수 있는 부분은 기본적으로 시멘틱 구조를 지켜 만드는 것과 메타 태그를 활용해 각 페이지 별로 추가 정보를 제공하는 방법이 있다. 그 중에서 Next.js 15에서 메타 태그를 적용하는 방법을 정리한다. 0. 적용기본적으로 Next.js 15에서 메타데이터를 정의하려면 서버컴포넌트에서 작성해야 한다. 1. Static metadata가장 기본적인 방법으로, object 형태의 메타 데이터를 생성하는 방법이다. Next.js 프로젝트를 생성하..

- FaviconFavicon?웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 작은 이미지일반적으로 16x16 픽셀의 사이즈 위 사진과 같이 브라우저에 뜨는 아이콘같은 형태의 이미지로 브라우저 탭, 북마크, 기록 등에 나타난다.사소해보이지만 웹사이트의 전반적인 인식 즉, 브랜딩과 사용자 경험에 있어 굉장히 큰 영향을 미친다. 이를 Next.js 에서 적용하는 방법은 되게 간단하다. 1. Favicon 제작 (16 x 16)원하는 로고를 제작해 16x16 픽셀로 제작하고 파일명은 favicon.ico 로 만들어준다. 2. 파일 적용 위는 공식문서 사진으로 생성한 파비콘을 app의 루트에 위치해주면 된다. - Open GraphOpen Graph?메타데이터의 하나로, SNS에서 웹사이..

정말 간단한 내용이지만 intercept routing과 parallel routes를 사용해서 modal을 띄우고 닫을 때 유용했던 점을 정리한다. Next.js의 기능만으로 @modal 폴더를 생성하고 띄울 경우, default.tsx 만으로는 url이 변경해도 @modal 슬롯의 변경을 감지하지 못해 ui가 변경되지 않는 문제가 발생했었다. 즉, 모달창이 닫히지 않는 경우가 발생한 것이다. 예를 들어서,1. /home 에서 /(.)modal/123 이라는 url로 이동하여 모달창 발생2. 다시 /home으로 돌아올 경우 혹은 /test와 같이 다른 페이지로 이동할 경우(router.back이 아닌 Link와 같은 url 변경 방식으로) url은 변경되나 모달창 그대로 유지되는 문제 발생 이런 경우,..

그동안은 업무에서 axios를 위주로 사용하다가 최근 개인 프로젝트를 진행하면서 기본 node.js에 내장된 Fetch API를 사용하고 있다. 확실히 Next.js 15 버전에서도 서버 컴포넌트에 마찬가지로 내장되어 있다보니 아래와 같은 이점으로 최적화가 쉽게 가능해 공식문서에서도 권장을 하고 있다. 1. Next.js 15에서 fetch 권장 이유자동캐싱Next.js 서버 컴포넌트에서 fetch 요청을 자동으로 정적 캐시동일한 요청이 여러 번 일어나도 서버가 매번 다시 호출하지 않음 (캐시된 응답 사용)기본으로 force-cacherevalidation캐시된 데이터를 주기적으로 또는 수동으로 갱신하는 기능ISR 사용 (이전 버전에서 getStaticProps를 통한 방법과 동일)예시 코드const r..

app routing으로 변경되면서 동적경로(Dynamic Routes)를 하는 방법이 약간은 달라졌다. 서버 컴포넌트와 클라이언트 컴포넌트에서 불러오는 방법이 각각 다른데 이를 정리한다.Dynamic Routes?동적 경로라는 의미로 [id]와 같은 형식으로 파일을 지정해 URL에 따라 동적으로 페이지를 렌더링 1. 서버 컴포넌트// app/product/[id]/page.tsxinterface IProductPage { params: { id: string };}const ProductPage = async ({ params }: IProductPage) => { const { id } = await params; return ( Dynamic Routes ID ..

기존에 react-query를 사용할 때 본인은 대부분 CSR 형태로 사용하고 있었다. 이렇게해도 사용하는데 문제는 없었지만 react-query를 사용해서 데이터를 불러오는 페이지는 Next.js의 SSR을 사실상 활용하지 못하고 있었다는 뜻이 된다. 그래서 이번에 Next.js 15 버전에 맞게 SSR에서 preFetch를 적용하는 방법을 정리한다. 1. 설치npm install @tanstack/react-query#oryarn add @tanstack/react-query 2. provider 생성// src/lib/providers/react-query-provider.tsx"use client";import { QueryClient, QueryClientProvider } from "@ta..