반응형 React/Nextjs6 [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기검색 엔진 최적화(SEO)에서 중요한 요소로 사용되는 사이트맵은, 웹사이트의 페이지와 콘텐츠를 구조적으로 나열한 파일로, 검색 엔진과 사용자에게 웹사이트의 구조와 페이지 간 관계를 명확히 전달하는 역할을 합니다. 이번 프로젝트에서 각 프렌차이즈 브랜드마다 사이트맵을 생성하여 검색 결과에 걸리게 하기 위해 사용해봤습니다. 이번엔 NextJS AppRouter에서 사이트맵을 동적으로 생성하는 방법에 대해 소개합니다. 📌 sitemap.xml Route Handler 폴더 구조 잡기app ㄴ sitemap.xml ㄴ route.ts위와 같이 폴더 구조를 잡아주어 https://xxx.com/sitemap.xml로.. 2024. 11. 22. [NextJS, SEO] AppRouter Dynamic Metadata 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Metadata 생성하기동적인 메타데이터를 사용하면 페이지마다 맞춤화된 메타 정보를 제공할 수 있습니다. 이를 통해 검색 엔진이 페이지의 목적과 내용을 더 정확히 이해할 수 있어 SEO를 향상시킬 수 있고,example.com/post/123와 example.com/post/456처럼 같은 페이지여도 독립적으로 색인될 가능성이 증가합니다. 📌 정적 메타데이터 생성NextJS에서 정적 메타데이터를 생성하는 방법은 다음과 같습니다.import type { Metadata } from 'next' export const metadata: Metadata = { title: '...', description: '...',} export defa.. 2024. 11. 21. Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기 📒 Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기 이번에 사이드 프로젝트를 Vercel에 배포하고 방문자 수를 확인하고 싶어 찾아보니Velcel에서 자체적으로 제공하는 좋은 툴이 있어서 소개드립니다. 📌 Vercel Web AnalyticsVercel Web Analytics을 이용하기 위한 방법은 정말 간단합니다.🔎 패키지 설치$ npm i @vercel/analytics🔎 컴포넌트 추가하기import { Analytics } from '@vercel/analytics/react'; export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( .. 2024. 10. 10. [Nextjs] react-query를 이용한 서버 데이터 Prefetch 방법 📒 react-query를 이용한 서버 데이터 Prefetch 방법Nextjs는 서버사이드 렌더링을 통해 사용자에게 완성된 HTML 페이지를 건네줄 수 있습니다.그와 더불어 데이터 fetching을 클라이언트가 아닌 서버에서 미리 한 뒤, 그 결과물을 HTML에 포함시킬 수도 있습니다.이렇게 prefetching이 이루어질 경우 거치는 네트워크 단계가 적어져 더 빠르고, 서버 안에서 호출-응답이 이루어지기 때문에 더 안전하다는 이점을 누릴 수 있습니다.그럼 Nextjs에서 react-query를 이용한 prefetch 방법을 소개하겠습니다.📌 QueryProvider 세팅react query를 사용하기 위해 QueryClientProvider를 위한 클라이언트 사이드 컴포넌트를 만들어준 뒤, layo.. 2024. 9. 12. [Nextjs] searchParams로 URL 쿼리 스트링 파싱하기 📒 searchParam으로 쿼리스트링 파싱하기모든 값들을 굳이 상태로 관리할 필요가 없습니다. 간단한 값을 저장하거나, 값을 유지시키며 URL을 공유할 때 주로 쿼리스트링을 사용하는데,이를 사용하기 위해선 다음과 같이 URL 마지막에 “?”를 추가한 후 데이터를 key=value 형태로 나열하면 됩니다.https://abcd.com?키=값&키2=값2그럼 nextjs에서 어떻게 쿼리스트링을 파싱할 수 있는지 소개합니다. 📌 Server Componenttype SearchParamProps = { searchParams: { page: number; title: string; };};export default function ServerSearchParam(props: SearchPar.. 2024. 9. 9. [Nextjs] Dynamic Route, 동적 라우팅 📒 Dynamic Route, 동적 라우팅URL 경로의 특정 부분을 변수로 설정해, 다양한 값에 따라 페이지를 동적으로 생성하는 기능인 동적 라우팅에 대한 3가지 방법을 소개합니다. 📌 기본 규칙폴더 구조로 경로를 표현하는 Nextjs는 대괄호를 통해 동적 라우팅이 가능합니다.예를 들면 다음과 같습니다.ex 1구조 : app/post/[pageNum]/page.tsxURL : /post/1params : { pageNum: 1 }ex 2구조 : app/post/[title]/page.tsxURL : /post/제목1params : { title : 제목1 } 📌 단일 세그먼트단일 세그먼트로 동적 라우팅을 하려면 위의 예시와 동일한 방법을 사용합니다.🔎 규칙[params_이름] → params : .. 2024. 8. 3. 반응형 이전 1 다음
오픈 채팅
