기본 사용법Next.js에서는 이미지 최적화를 위해 next/image컴포넌트를 사용한다.import Image from 'next/image'src: 이미지 소스 URLwidth 및 height:필수 속석으로, 이미지의 원본 크기를 지정레이아웃 시프트 방지 및 적절한 공간 확보에 사용반응형 이미지 설정 방법alt: 접근성을 위한 대체 텍스트quality:선택적 속성으로, 1-100 사이의 값 지정(기본값 75)WebP 등으로 변환 시 이미지 품질 조절에 사용 Next.js는 이 정보를 바탕으로 자동 WebP 변환, 레이지 로딩, 디바이스 크기에 맞는 이미지 제공 등의 최적화를 수행한다. 외부 이미지 사용외부 이미지를 사용할 경우, next.config.mjs에 다음과 같이 설정해줘야만 해당 이미지 주소..

Pages Router페이지 라우터에서는 사전 렌더링 과정 중 Next.js 서버 사이드에서 다른 백엔드 서버나 데이터베이스로부터 데이터를 페칭한다.작동 원리페이지 역할을 하는 파일 안에 서버 측에서만 실행되는 특수 함수를 사용하여 데이터를 직접 페칭하며, 페칭한 데이터는 페이지 컴포넌트에 props로 전달한다.export async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data }, }}export default function Page({ data }) { return {data}..

Pages RouterHead페이지 별로 Head 컴포넌트 안에 작성하여 SEO 관련 메타 데이터를 설정할 수 있다.import Head from "next/head";export default Page() { return ( 타이틀 // ... );} Fallback 상태에서의 SEO 처리동적 라우팅을 사용하는 페이지(예: 아이템별 상세 페이지)에서 fallback:true를 설정했을 때, 지정하지 않은 경로에 대해 SSR과 유사하게 동작한다. 이때 초기 HTML에 SEO 관련 메타 데이터가 포함되지 않는 문제가 발생할 수 있는데, 이를 방지하기 위해 fallback 상태에서..

웹 애플리케이션의 렌더링 방식과 Next.js웹 애플리케이션을 개발할 때 가장 중요한 선택 중 하나는 렌더링 방식이다.각 방식은 고유한 장단점을 가지고 있으며, Next.js를 통해 이러한 방식들을 유연하게 활용할 수 있다.렌더링 방식CSR (Cdevmark.tistory.com서버 사이드 렌더링 (SSR)요청이 들어올 때마다 사전 렌더링을 진행하는 방식getServerSideProps커포넌트보다 먼저 실행되어서 컴포넌트에 필요한 데이터를 불러오는 함수export const getServerSideProps = () => { const data = "hello"; return { props: { data, }, };};export default function Page({ d..

Pre-fetching이란?Pre-fetching은 페이지를 사전에 미리 불러오는 기능이다. 현재 사용자가 보고 있는 페이지 내에서 이동할 가능성이 있는 모든 페이지들을 사전에 미리 불러놓는다. Next.js는 이 기능을 통해 이동을 위한 데이터를 미리 불러와 놓음으로써 페이지 이동을 매우 빠른 속도로 지체 없이 처리할 수 있게 해준다. Link 컴포넌트 사용기본적으로 Link컴포넌트로 명시된 경로는 프리페칭이 된다. index search book/1프리페칭 해제 방법search Programmatic NavigationProgrammatic Navigation이란?프리페칭 설정 방법import { useRouter } from "next/router";export default function ..

페이지 라우터 (Pages Router)기존 방식에서는 _app.tsx를 통해 전역(Global) 레이아웃을 정의하고,특정 페이지에서만 별도의 레이아웃을 적용하고 싶을 때는 getLayout 패턴을 사용한다..├── src│ ├── components│ │ ├── global-layout.tsx│ │ └── searchable-layout.tsx│ ├── pages│ │ ├── _app.tsx│ │ ├── book│ │ │ └── [[...id]].tsx│ │ ├── search│ │ │ └── index.tsx글로벌 레이아웃// global-layout.tsxexport default function GlobalLayout({ childr..

페이지 이동Link index search book/1 Programmatic Navigation사용자가 링크를 직접 클릭했을 때 페이지를 이동시키는 방식이 아니라, 특정 버튼이 클릭되거나 특정 조건을 만족했을 경우에 어떤 함수 내부에서 페이지를 이동시키는 방법import { useRouter } from "next/router"; // 페이지 라우터 버전import { useRouter } from "next/navigation"; // 앱 라우터 버전export default function App() { const router = useRouter(); const onClickButton = () => { router.push("/test"); }; return ( ..

경로 페이지Pages Router.├── src│ ├── pages│ │ ├── _app.tsx│ │ ├── _document.tsx│ │ ├── index.tsx│ │ └── search│ │ └── index.tsx // '/search'│ │ └── search.tsx // '/search/settiㅍng' App Router.├── src│ ├── app│ │ ├──layout.tsx│ │ ├── page.tsx│ │ └── search│ │ └── page.tsx // '/search' 쿼리 스트링'/search?q=쿼리스트링' Pages Routerimport { useRouter } fro..