728x90

Next.js 6

Next.js 15에서 동적 Sitemap 생성과 fetch 호출 문제 해결 방법(app router)

목차1. Sitemap이란?2. sitemap.xml 파일 생성하는 방법3. fetch 동적으로 호출하기  웹사이트의 SEO 최적화와 사이트 구조 이해를 돕기 위해 sitemap.xml 파일을 생성하는 것은 매우 중요한 작업입니다.Next.js 15에서는 sitemap.xml 파일을 동적으로 생성하는 방법을 제공하며, 이를 통해 사이트의 최신 상태를 검색 엔진에 자동으로 전달할 수 있습니다.이 글에서는 동적 sitemap.xml 파일 생성과 관련된 문제 해결 방법을 설명합니다.1. Sitemap이란?Sitemap.xml은 웹사이트의 각 페이지 URL을 포함하는 XML 파일로, 검색 엔진이 웹사이트의 구조를 더 잘 이해하고 효율적으로 색인화할 수 있도록 돕습니다. 이 파일은 주로 검색 엔진 크롤러가 페이지..

dev/Next.js 2024.11.23

Next.js 15 App router 404 커스텀

export default function Custom404() { return 404 - Page Not Found;}목차1. 에러 페이지 위치 및 소스 코드 작성2. 확인  404 에러 페이지는 사용자가 요청한 웹 페이지나 리소스를 서버가 찾을 수 없을 때 표시 되는 오류입니다.상태코드는 404 이며, 사용자가 잘못된 URL로 접근을 하였거나, 리소스가 삭제 되었을 경우 발생합니다. 기본적으로 Next.js에서는 자체적으로 404 페이지를 보여줍니다. 위와 같이 기본 페이지이만으로 충분히 의미가 전달이 되지만, 프로젝트 진행시 커스텀이 필요한 경우도 있으므로, Next.js 15에서 404 페이지 커스텀 하는 방법을 알아보도록 하겠습니다. Next.js 15App router 방식 1. 에러 페이지..

dev/Next.js 2024.11.10

Next.js 15 favicon 변경하기

목차1. 파비콘이란?2. 파비콘 변경 방법  1 파비콘이란?파비콘(Favicon)은 "Favorites Icon"의 줄임말로, 브라우저의 탭, 즐겨찾기 목록, 그리고 검색 엔진 결과에서 웹사이트를 대표하는 작은 아이콘을 의미합니다. 주로 웹사이트의 브랜드나 로고를 활용하며, 사용자가 사이트를 쉽게 식별할 수 있도록 돕습니다. 2. 파비콘 변경 방법- Next.js에서 파비콘을 변경하기 이전에 파비콘은 다음과 같습니다. - 파비콘의 위치는 /src/app/ 의 폴더에 있습니다. - 일반적으로 32x32 또는 16x16 크기의 .ico 파일을 사용하지만, PNG 형식도 지원됩니다. 파비콘 생성기를 사용해 다양한 크기의 파비콘을 만들 수 있습니다. - 구글에서 설명하는 파비콘의 크기는 다음과 같습니다  - 파..

dev/Next.js 2024.11.08

Next.js에서 SVG 아이콘 설정 및 활용하기

목차1. 라이브러리 설치2. 설정파일 수정3. 코드 작성 1. 라이브러리 설치- 다음과 같이 라이브러리를 설치합니다 npm install @svgr/webpack 2. 설정파일 수정- next.js의 설정파일인 next.config.mjs의를 수정합니다/** @type {import('next').NextConfig} */const nextConfig = { ... webpack: (config) => { config.module.rules.push({ test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ["@svgr/webpack"], }); return config; },};export default nextConfig;3. 코..

dev/Next.js 2024.11.03

Next.js 15 이미지 등록하고 사용하기

목차1. 이미지 경로2. 코드 수정 이번 포스트에서는 Next.js에서 이미지를 등록하고 활용하는 방법에 대해 소개합니다. next/image 컴포넌트를 사용하여 로컬 이미지 파일을 등록하고 웹 페이지에 최적화된 상태로 표시하는 법을 다룹니다.예제로 로고 이미지를 클릭 시 홈으로 이동하는 기능을 구현하며, 이미지 속성 설정 및 스타일링을 Tailwind CSS와 함께 사용하는 방법을 보여줍니다. 1. 이미지 경로- 이미지의 경로는 public 폴더에서 img라는 폴더를 사용하며, 사용할 이미지를 복사해서 붙여넣습니다. 2. 코드 수정- next/image컴포넌트를 사용하여 예제코드를 작성하겠습니다.- css는 tailwind css이며, 이벤트는 홈으로 가는 이벤트입니다.import Image from ..

dev/Next.js 2024.11.03

Next.js 14 에 mui 프레임워크 tailwind css 적용방법

MUI(Material-UI)는 React 기반의 프론트엔드 개발을 위한 오픈소스 UI 라이브러리입니다. MUI는 다양한 미리 설계된 컴포넌트들을 제공하여, React 개발자들이 빠르고 효율적으로 사용자 인터페이스(UI)를 구성할 수 있도록 돕습니다. 특히, 구글의 머티리얼 디자인(Material Design) 가이드라인을 바탕으로 디자인된 컴포넌트를 제공하여 일관된 사용자 경험을 유지하면서도 직관적인 디자인을 쉽게 구현할 수 있습니다.MUI의 주요 특징:컴포넌트 기반 구조: MUI는 버튼, 카드, 네비게이션 바 등과 같은 다양한 UI 컴포넌트를 제공하며, 이를 조합해 애플리케이션을 쉽게 구축할 수 있습니다.커스터마이징: 기본적으로 제공되는 디자인을 쉽게 변경하거나 커스터마이징할 수 있어, 자신만의 스타..

dev/Next.js 2024.10.16
728x90
반응형