Next.js에서 Dynamic Routes 사용 방법에 대해 알아보겠습니다. Dynamic Routes Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있습니다. pages/movies 경로에 [id].js 파일을 생성하면 /movies/1, /movies/abc 등과 같은 경로로 접속할 수 있습니다. 다음 예제처럼 useRouter()의 query를 통해 /movies 다음의 하위 경로를 확인할 수 있습니다. // pages/movies/[id].js import { useRouter } from 'next/router'; export default function Detail() { const router = useRouter(); const {..

Next.js에서 Redirect와 Rewrite 설정 방법에 대해 알아보겠습니다. Redirect와 Rewrite 설정은 next.config.js 파일에서 설정하게 됩니다. next.config.js Next.js에서 커스텀 설정을 하기 위해서는 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있습니다. next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈입니다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, }; module.exports = nextConfig; Next.js 서버 및 빌드 단계에서 사용되며 브라우저 ..

Next.js에서 Head 사용 방법에 대해 알아보겠습니다. Title 설정 Next.js에는 페이지 헤더의 제목을 변경하고 meta를 추가할 수 있는 내장 컴포넌트를 가지고 있습니다. import Head from 'next/head'; export default function Home() { return ( Hello ); } 태그 중복 방지 head에 태그가 중복되는 것을 방지하려면 다음 예제와 같이 태그가 한 번만 렌더링 되도록 하는 key 속성을 사용할 수 있습니다. import Head from 'next/head'; export default function Home() { return ( Hello ); } 이 경우 두 번째 meta property="og:title"만 렌더링 됩니다. ..

Next.js에서 스타일 적용하는 방법에 대해 알아보겠습니다. CSS-in-JS 가장 간단한 방법은 인라인 스타일입니다. export default function Home() { return ( Hello ); } CSS Modules Next.js는 [name].module.css 파일 명명 규칙을 사용하여 CSS Module을 지원합니다. Common.module.css 파일을 생성하고 스타일을 아래와 같이 작성합니다. 중요한 것은 .module.css 패턴을 사용하는 것입니다. .nav { display: flex; justify-content: space-between; background-color: red; } .text { color: blue; } 생성된 module을 import 해서 ..

Next.js에서 Rouing 하는 방법에 대해 알아보겠습니다. a 태그 사용 태그를 사용해서 페이지 이동을 할 수 있습니다. 하지만 페이지 이동 시 전체 페이지 새고로침이 되는 문제가 발생했습니다. export default function NavBar() { return ( Home About Us ); } Link 사용 single-page app 환경의 페이지 전환을 하려면 Link 컴포넌트를 사용해야 합니다. import Link from 'next/link'; export default function NavBar() { return ( Home About Us ); } useRouter() 컴포넌트에서 router 객체 내부에 접근하려면 userRouter() hook 을 사용할 수 있습니다..

Next.js를 사용하는 프로젝트 생성 하는 방법에 대해 알아보겠습니다. 시스템 요구 사항 Node.js 14.6.0 이상 MacOS, Windows(WSL 포함) 및 Linux가 지원됩니다. 프로젝트 생성 리액트 프로젝트를 생성하는 방법과 비슷하게 create-next-app 명령어를 사용합니다. @latest를 추가하면 최신 버전으로 프로젝트를 생성합니다. npx create-next-app@latest # or yarn create next-app TypeScript 프로젝트로 시작하려면 --typescript 옵션을 추가합니다. npx create-next-app@latest --typescript # or yarn create next-app --typescript 위의 방법으로 프로젝트를 생성..