⚡️ SEO 설정하기
Next에서는 리액트 앱과는 달리 ✨페이지 별로 메타 태그를 설정✨하는 것이 가능!
적용 방식
<Head>태그는 next/head와 next/document 이렇게 두 곳에서 불러올 수 있는데, next/document는 📁 document.tsx 파일에서만 사용하는 것이라 next/head에서 불러올 것!<meta>태그를 사용해서 open graph를 설정한다.
- property="og:image": 썸네일 이미지로 사용할 파일의 경로를 설정.
- property="og:title": 페이지의 타이틀을 설정.
- property="og:description": 페이지의 간단한 설명을 추가.
예외 처리에 따른 기본 메타 태그 설정
라우팅 시 fallback이 발생하면 '로딩 중입니다'를 반환하도록 설정해놨었는데, 우리의 메타 태그 설정은 예외 처리 이후에 있기 때문에 fallback 발생 시 아무런 메타 태그가 설정되지 않는 문제가 발생한다.
따라서 예외 처리 시 위와 같이 기본적인 메타 태그도 함께 반환되도록 설정하였다.
⚡️ 배포하기
1️⃣ 프로젝트에 vercel 설치하기
npm install -g vercelvercel 패키지를 글로벌로 설치하는 명령어! 프로젝트 터미널에 입력해주기.
2️⃣ vercel 로그인하기
3️⃣ 배포하기
vercel해당 명령어를 입력하면, 이후 나오는 질문들을 통해 배포에 대한 구체적인 설정을 할 수 있다.
배포한 페이지와 연결된 백엔드 서버도 배포를 해줘야, 우리 페이지에서 데이터를 불러와 사용할 수 있다.
4️⃣ fetch 함수들에 연결된 url을 배포된 링크로 변경하기
이 때 주의할 것은 Domains 주소로 연결해야 된다는 것. 생각하고 하자 ~
5️⃣ 재배포하기
vercel --prod코드에 변경사항이 생겼으므로 다시 배포해준다.
--prod는 프로덕션 모드로 배포하라는 뜻.
재배포까지 완료하면 다음과 같이 Status: Ready 상태임을 확인할 수 있다. 
6️⃣ 배포된 페이지 확인하기
확인해보면 위와 같이 백엔드로부터 데이터를 정상적으로 불러와 페이지에 렌더링하는 것을 확인할 수 있다.
Reference
👩🏻🏫 한입 크기로 잘라 먹는 Next.js(15+) https://www.inflearn.com/course/한입-크기-nextjs/
꾸준하고 성실하게, FE 개발자 역량을 키워보자 !