Next.js에서 Dynamic Routes를 사용하다 보니 meta tag 설정하는 부분에서 삽질을 너무 많이 했다. 다음에는 이런 일이 없도록 정리해 보았다.
삽질을 하면서 알게 된 것
- meta 태그에는 static 한 값만 넣을 수 있다.
- getServerSideProps는 은근히 까다롭다.
- fetch는 절대 url을 사용해야 한다.
- 예제를 찾을 때는 다른 분들이 작성하신 블로그를 꼼꼼하게 읽자
아래 블로그에서 해답을 얻을 수 있었다. (정말.. 이 분이 아니었다면 머리가 다 뜯겼을지도 모른다.)
Next.js 다이나믹 메타 태그 넣기
저번 글에 이어서 SEO 작업을 계속 하고 있다. 이번주엔 다이나믹 메타 태그 작업을 했다. (메타태그 종류나, 검색최적화를 위한 추천 등의 내용은 없습니다) https://jisoo-log.tistory.com/18 Next.js 정적,
jisoo-log.tistory.com
meta 태그에는 static 한 값만 넣을 수 있다.
이 부분을 몰라서 얼마나 삽질을 했는지 모른다. 이전 코드에서는 useRouter에 query를 불러와서 useState의 값을 변경하고, meta tag에 삽입하는 방식을 사용했는 데 브라우저에서 확인할 때는 잘 들어가 있는 데 실제로 확인할 때는 안 나와서 "도대체 왜 안 나오는 거지?!?!" 하면서 물음표를 100개는 넘게 띄웠다.
이제라도 알았으니 다음에는 실수하지 않도록 노력해야.. 지
fetch는 절대 url을 사용해야 한다.
지금까지는 ajax나 axios만 사용해 봐서 fetch에 대해서는 잘 모르고 있었는 데 이번 기회에 조금 친해진 것 같다. (아주 조금)
공식문서에 따르면 getServerSideProps에서는 fetch를 사용해서 데이터 통신을 해야 하는 것 같아서 사용했는 데
아래와 같이 "Only absolute URLs are supported"라는 오류가 발생해서 찾아보니 fetch에서는 절대 url을 사용해야 한다는 걸 알게 되었다. (아래 stackoverflow 참고함)
Next.js - Error: only absolute urls are supported
I'm using express as my custom server for next.js. Everything is fine, when I click the products to the list of products Step 1: I click the product Link Step 2: It will show the products in the
stackoverflow.com
코드
아래 코드는 프로젝트마다 다를 수 있기 때문에 참고용으로
import { useState, useEffect } from "react"
import { useRouter } from "next/router"
import Head from "next/head"
// /branch/${branchNum}
const Branch = ({ branchInfo }) => {
const [routes, setRoutes] = useState()
const {
asPath,
query: { branch },
} = useRouter()
useEffect(() => {
if (branch && typeof branch === "object" && branch.length > 0) {
setRoutes(branch[0])
} else if (asPath === "/branch") {
setRoutes("branch")
}
}, [asPath, branch])
return (
<>
<Head>
<title>{branchInfo.title}</title>
<meta keyword={branchInfo.title} />
<meta content={branchInfo.title} />
<meta name="description" content={branchInfo.desc} />
<meta property="og:image" content={branchInfo.ogImg} />;
</Head>
// ...
</>
)
}
const dev = process.env.NODE_ENV !== "production"
// fetch는 절대 url을 사용해야 하기 때문에 개발자 모드에서는 http://localhost:3000을 그 외에는 https://#를 사용합니다.
const server = dev ? "http://localhost:3000" : "https://#"
export const getServerSideProps = async (context) => {
// 지점 목록 -> branch = null, 지점 상세 -> branch = [ "#" ]
const { branch } = context.query // context로 query나 param을 받아올 수 있음
const res = await fetch(`${server}/api/metaBranchName/${branch?.[0] || 0}`)
const data = await res.json()
return {
props: {
branchInfo: branch
? {
title: `지점 상세 ${branch[0]}`,
desc: `지점 상세 ${branch[0]}`,
ogImg: `s3 이미지 or 프로젝트에 local 이미지`,
}
: {
title: "지점 목록",
desc: "지점 목록",
ogImg:
"/img/ogImg/branch/img/ogImg/main_ogImg.png",
},
},
}
}
export default Branch'프레임워크 > Next.js' 카테고리의 다른 글
| [Next.js] styled-component 적용하기 (0) | 2023.01.17 |
|---|---|
| [Next.js] passport 알아보다가 알게된 Next.js... (0) | 2022.03.03 |
| [Next.js] 기타 호스팅 옵션 (0) | 2022.02.26 |
| [Next.js] Vercel에 배포 (0) | 2022.02.26 |
| [Next.js] Github에 Push (0) | 2022.02.26 |
댓글