Je개발 일지

Next.js에서의 캐싱 Next.js는 렌더링 작업과 데이터 요청을 캐싱하여 애플리케이션의 성능을 향상시키고 비용을 절감합니다. 이 페이지에서는 Next.js 캐싱 메커니즘, 구성에 사용할 수 있는 API, 그리고 이들이 서로 어떻게 상호작용하는지에 대해 자세히 살펴봅니다. 알아두면 좋은 점 이 페이지는 Next.js가 내부적으로 어떻게 작동하는지 이해하는 데 도움이 되지만, Next.js를 생산적으로 사용하는 데 필수적인 지식은 아닙니다. Next.js의 캐싱 휴리스틱은 대부분 API 사용에 따라 결정되며, 설정 없이 또는 최소한의 설정으로도 최고의 성능을 위한 기본값을 제공합니다. 예시로 바로 넘어가고 싶다면 여기서 시작하세요. ..

Next.js를 Frontend의 Backend로 사용하는 방법 Next.js는 "Backend for Frontend" 패턴을 지원합니다. 이를 통해 HTTP 요청을 처리하고 HTML뿐만 아니라 모든 콘텐츠 타입을 반환할 수 있는 공개 엔드포인트를 만들 수 있습니다. 또한 데이터 소스에 액세스하고 원격 데이터 업데이트와 같은 부수 효과를 수행할 수도 있습니다. 새 프로젝트를 시작하는 경우, --api 플래그와 함께 create-next-app을 사용하면 새 프로젝트의 app/ 폴더에 API 엔드포인트 생성 방법을 보여주는 예제 route.ts가 자동으로 포함됩니다. npx create-next-app@latest --api 📌 알아두면 좋은 점 ..

Next.js에서 인증 구현하는 방법인증을 이해하는 것은 애플리케이션 데이터를 보호하는 데 중요합니다. 이 페이지는 인증을 구현하기 위해 사용할 React와 Next.js 기능들을 안내합니다.시작하기 전에 프로세스를 세 가지 개념으로 나누는 것이 도움이 됩니다:인증(Authentication): 사용자가 자신이 주장하는 사람인지 확인합니다. 사용자명과 비밀번호 같은 자신이 가진 것으로 신원을 증명하도록 요구합니다.세션 관리(Session Management): 요청 간에 사용자의 인증 상태를 추적합니다.권한 부여(Authorization): 사용자가 액세스할 수 있는 경로와 데이터를 결정합니다.이 다이어그램은 React와 Next.js 기능을 사용한 인증 플로우를 보여줍니다: 클라이언트에서 서버로의 인..

Next.js 애플리케이션에 분석 기능 추가하기 Next.js는 성능 메트릭을 측정하고 보고하는 기능을 내장하고 있습니다. useReportWebVitals 훅을 사용하여 직접 보고를 관리하거나, Vercel에서 제공하는 관리형 서비스를 사용하여 자동으로 메트릭을 수집하고 시각화할 수 있습니다. 클라이언트 인스트루멘테이션 더 고급 분석 및 모니터링 요구사항을 위해 Next.js는 애플리케이션의 프론트엔드 코드가 실행되기 전에 실행되는 instrumentation-client.js|ts 파일을 제공합니다. 이는 전역 분석, 에러 추적 또는 성능 모니터링 도구를 설정하는 데 이상적입니다. 사용하려면 애플리케이션의 루트 디렉토리에 instrumentation-clie..

Route Handlers와 Middleware Route Handlers Route Handlers를 사용하면 Web Request와 Response API를 사용하여 특정 라우트에 대한 커스텀 요청 핸들러를 생성할 수 있습니다. 🔍 알아두면 좋은 점 Route Handlers는 app 디렉토리 내에서만 사용할 수 있습니다. 이들은 pages 디렉토리 내의 API Routes와 동등한 기능을 제공하므로 API Routes와 Route Handlers를 함께 사용할 필요가 없습니다. 규칙 Route Handlers는 app 디렉토리 내의 route.js|ts 파일에서 정의됩니다: export async function GET(request: Req..

메타데이터와 OG 이미지 메타데이터 API는 SEO 개선과 웹 공유 기능을 위해 애플리케이션 메타데이터를 정의하는 데 사용할 수 있으며, 다음을 포함합니다: 정적 metadata 객체 동적 generateMetadata 함수 정적 또는 동적으로 생성되는 파비콘과 OG 이미지를 추가하는 데 사용할 수 있는 특별한 파일 규칙 위의 모든 옵션을 통해 Next.js는 자동으로 페이지에 대한 관련 태그를 생성하며, 브라우저의 개발자 도구에서 확인할 수 있습니다. 💡 실무 팁 메타데이터 설정은 SEO에 매우 중요합니다. 특히 블로그나 콘텐츠 사이트의 경우 각 페이지마다 고유한 제목과 설명을 설정하는 것이 검색 엔진 최적화에 큰 도움이 됩니다. ..

폰트 최적화 next/font 모듈은 폰트를 자동으로 최적화하고 개선된 프라이버시와 성능을 위해 외부 네트워크 요청을 제거합니다. 모든 폰트 파일에 대한 내장 셀프 호스팅을 포함합니다. 이는 레이아웃 시프트 없이 웹 폰트를 최적으로 로드할 수 있다는 것을 의미합니다. next/font 사용을 시작하려면 next/font/local 또는 next/font/google에서 임포트하고, 적절한 옵션으로 함수로 호출한 다음, 폰트를 적용하려는 요소의 className을 설정하세요. 예를 들어: import { Geist } from 'next/font/google'const geist = Geist({ subsets: ['latin'],})export default function Layout({ ch..

이미지 최적화 Next.js 컴포넌트는 HTML 요소를 확장하여 다음과 같은 기능을 제공합니다: 크기 최적화: WebP와 같은 최신 이미지 형식을 사용하여 각 디바이스에 맞는 크기의 이미지를 자동으로 제공합니다. 시각적 안정성: 이미지 로딩 시 레이아웃 시프트를 자동으로 방지합니다. 빠른 페이지 로드: 네이티브 브라우저 지연 로딩을 사용하여 뷰포트에 들어올 때만 이미지를 로드하며, 선택적으로 블러 업 플레이스홀더를 제공합니다. 자산 유연성: 원격 서버에 저장된 이미지라도 온디맨드로 크기를 조정할 수 있습니다. 사용을 시작하려면 next/image에서 임포트하고 컴포넌트 내에서 렌더링하세요. import Image from 'next/image'export defau..

CSS Next.js는 CSS를 사용하여 애플리케이션을 스타일링하는 여러 가지 방법을 제공합니다: CSS 모듈 전역 CSS 외부 스타일시트 Tailwind CSS Sass CSS-in-JS CSS 모듈 CSS 모듈은 고유한 클래스 이름을 생성하여 CSS를 로컬 범위로 지정합니다. 이를 통해 이름 충돌을 걱정하지 않고 서로 다른 파일에서 동일한 클래스를 사용할 수 있습니다. CSS 모듈 사용을 시작하려면 .module.css 확장자로 새 파일을 만들고 app 디렉토리 내의 모든 컴포넌트로 가져오세요: /* app/blog/blog.module.css */.blog { padding: 24px;} // app/blog/page.tsximport styles..

에러 처리 에러는 두 가지 범주로 나눌 수 있습니다: 예상 에러와 포착되지 않은 예외입니다. 이 페이지에서는 Next.js 애플리케이션에서 이러한 에러들을 어떻게 처리하는지 안내합니다. 예상 에러 처리 예상 에러는 서버 측 폼 검증이나 실패한 요청과 같이 애플리케이션의 정상적인 작동 중에 발생할 수 있는 에러입니다. 이러한 에러는 명시적으로 처리되어 클라이언트에 반환되어야 합니다. 서버 함수 서버 함수에서 예상 에러를 처리하기 위해 useActionState 훅을 사용할 수 있습니다. 이러한 에러의 경우, try/catch 블록을 사용하고 에러를 던지는 것을 피하세요. 대신 예상 에러를 반환값으로 모델링하세요. 'use server'export async function createPost(..