React | Next.js 사용해보기 (2)

STUDY/React

개미606 2021. 1. 29. 14:11

1. Assets

이미지같은 정적인 리소스들은 public 폴더 하위에 둔다.

public폴더 하위에 images폴더를 생성한 뒤, 이미지를 넣어줬다.

그리고 index.js에서 불러오기!

<img src="/images/cane-corso.jpg" />

HTML의 <title>나 <link> 태그는 Head 컴포넌트를 통해 수정할 수 있다.

페이지별로 title을 다르게 할 수 있다..!! 그냥 리액트만 사용할 땐 못했었던 것..

index.js에서 Head 컴포넌트를 import 한다.

import Head from "next/head";

Head 컴포넌트를 정의해준다

<title>태그와 <link>태그를 Head 컴포넌트로 감싸주는 형식!

<Head>
  <title>NextJS Test</title>
  <link rel="icon" href="/favicon.ico" />
</Head>