Next.js에서 Dynamic Routes 사용 방법에 대해 알아보겠습니다. Dynamic Routes Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있습니다. pages/movies 경로에 [id].js 파일을 생성하면 /movies/1, /movies/abc 등과 같은 경로로 접속할 수 있습니다
Next.js에서 Redirect와 Rewrite 설정 방법에 대해 알아보겠습니다. Redirect와 Rewrite 설정은 next.config.js 파일에서 설정하게 됩니다. next.config.js Next.js에서 커스텀 설정을 하기 위해서는 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있
Next.js에서 Head 사용 방법에 대해 알아보겠습니다. Title 설정 Next.js에는 페이지 헤더의 제목을 변경하고 meta를 추가할 수 있는 내장 컴포넌트를 가지고 있습니다. 123456789101112import Head from 'next/head';export default function Home() { return (
Next.js에서 스타일 적용하는 방법에 대해 알아보겠습니다. 1. CSS-in-JS 가장 간단한 방법은 인라인 스타일입니다. 1234567export default function Home() { return ( <div> <div style={{ color: 'red' }}&
Next.js에서 Rouing 하는 방법에 대해 알아보겠습니다. <a> 사용 <a> 태그를 사용해서 페이지 이동을 할 수 있습니다. 하지만 페이지 이동 시 전체 페이지 새고로침이 되는 문제가 발생했습니다. 12345678export default function NavBar() { return ( <nav>
Next.js를 사용하는 프로젝트 생성 하는 방법에 대해 알아보겠습니다. 시스템 요구 사항 Node.js 14.6.0 이상 MacOS, Windows(WSL 포함) 및 Linux 가 지원됩니다. 프로젝트 생성 리액트 프로젝트를 생성하는 방법과 비슷하게 create-next-app 명령어를 사용합니다. @latest 를 추가하면 최신 버전으로 프로젝트
gatsby-source-filesystem 로컬 파일 시스템에서 Gatsby 애플리케이션으로 데이터를 sourcing 하기 위한 Gatsby 소스 플러그인입니다. 플러그인은 파일에서 파일 노드를 생성합니다. 다양한 “transformer” 플러그인은 파일 노드를 다양한 다른 유형의 데이터로 변환할 수 있습니다. Markdown, JSON, 이미지, YA
useStaticQuery useStaticQuery는 빌드 시 리액트 훅을 사용하여 Gatsby의 GraphQL 데이터 계층을 쿼리 하는 기능을 제공합니다. 이를 통해 React 컴포넌트는 구문 분석, 평가 및 컴포넌트에 삽입될 GraphQL 쿼리를 통해 데이터를 검색할 수 있습니다. useStaticQuery 훅은 모든 컴포넌트 또는 페이지에서 사용할
Gatsby Head API Gatsby 에는 페이지의 문서 헤드에 요소를 추가할 수 있는 내장 head가 포함되어 있습니다. react-helmet 또는 기타 유사한 솔루션과 비교할 때 Gatsby Head는 사용하기 쉽고 성능이 우수하며 번들 크기가 더 작고 최신 React 기능을 지원합니다. 12// ex)export const Head = () =
Layout Components Gatsby는 기본적으로 레이아웃을 페이지에 자동으로 적용하지 않습니다. 대신 Layout Component를 사용하면 Header 및 Footer, 그리고 일부 페이지에서 사용하는 사이드바와 같은 여러 가지 레이아웃을 만들 수 있습니다. 또한 레이아웃과 페이지 컴포넌트 간에 데이터를 전달할 수 있습니다. 즉, Layout