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에서 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 을 사용할 수 있습니다..

Routing 리액트 라우터를 사용하여 페이지를 생성하는 것과 달리 Gatsby는 src/pages 안에 각 .tsx 파일에 대한 페이지를 생성합니다. 예를 들어 src/pages/contact.tsx는 yoursite.com/contact 페이지를 생성하고 src/pages/home.tsx는 yoursite.com/home 페이지를 생성합니다. Gatsby로 Routing 하는 것은 간단하고 리액트 라우터도, 스크린도 만들 필요 없고 그 경로와 요소들을 일일이 설명할 필요도 없다는 장점이 있습니다. // src/pages/index.tsx import React from 'react'; export default function Index() { return Hello world; } 참고 https:..