React/Next
[NEXT] 웹페이지 제목 나타내기/ 이미지 설정하기
래모
2023. 1. 16. 19:02
웹페이지 제목 나타내기
기존 html에서 title태그를 사용하면 웹페이지의 제목을 나타낼 수 있다.
Next.js에서도 비슷하다 대신 next/head를 이용해준다.
//Seo.js
import Head from "next/head";
export default function Seo({title}) {
return (
<Head>
<title>{title} | Next Movies</title>
</Head>
)
}이러면 사용하는 곳에서 children ( = title) 값에 따라 다르게 설정이 가능하다.
//index.js
...
import Seo from "../components/Seo";
export default function Home({results}) {
...
return (
<div>
<Seo title = "Home"/>
</div>
);
}이미지 설정하기
img태그를 사용하는 건 똑같다!!
원래 상대경로 혹은 절대 경로를 이용했다면 Next.js에선 그냥 써주면 된다.
public폴더 안에 원하고자 하는 이미지를 넣고
<img src = "/next.svg"></img>다음과 같이 써준다.
혹은 next/img를 import해주면 되는데 이건 필수로 width, height값이 필요하여서 좀 귀찮다. 물론 잘 쓰일 곳도 있겠지만
이건 내가 정리하는 대신 잘 나와있는 블로그 링크를 참고하자!
Next/Image에 대해 얼만큼 알아?
글을 쓰게된 계기 최근 next.js를 공부하면서 직접 구현해보며 깊이 이해한 부분이 있어 글로 남겨보고자 합니다. 아무래도 이미지를 화면에 출력하게 되는데 next.js에서는 이미지를 최적화시켜
velog.io