<Head> 작성
- 우선 배포에 앞서 SEO에 맞춰서 설정해주어야 한다. 자세한 내용은 전에 포스팅했던 Mordern HTML 를 참조바란다.
- 그럼이제 next.js에서 <Head>를 작성하는 법을 알아보자.
function HomePage(props){
return(
<>
<Head>
<title>React Meetups</title>
<meta name={"페이지 이름"} content={"SE이 내보낼 간단한 설명"}/>
</Head>
<컴포넌트></컴포넌트>
</>
)
}동적으로 <Head> 작성하기
function MeetupDetails(props) {
return (
<>
<Head>
<title>{props.타이틀}</title>
<meta name={"description"} content={props.상세설명}/>
</Head>
<디테일컴포넌트
image={props.meetupData.image}
title={props.meetupData.title}
address={props.meetupData.address}
desciption={props.meetupData.description} />
</>
)
}- 간단하게 동적표현식(
{ })과 props를 이용하여 작성할 수 있다.
Vercel
-
Vercel은 NextJS를 개발한 팀과 같은 팀이 만든 호스팅 서비스 업체라서 NextJS를 잘 수용하고 NextJS에 최적화되어 있다.
-
로그인 하고 github와 연동을 하고 기존에 작성한 프로젝트를 git의 저장소에 올려놓았다면 다음과 같은 본인 깃헙에 있는 저장소 목록들을 볼 수 있다.
-
물론 npm start로 프로덕션 서버를 시작할 수 있다. 다시 말해, 실행 중인 서버가 있지만 이것은 원격 기기에서 시작할 수 있는 프로덕션 서버이며 다음 애플리케이션을 위해 실행하는 사용자가 직접 관리하는 서버이다.
-
따라서 애플리케이션을 외부에 공개하려는 경우 애플리케이션을 배포한 기기에서 해당 서버는 계속 실행되고 있어야 한다.
하지만 이런 작업들을 이제 Vercel가 수행할 것이다.
-
여기서 원하는 프로젝트를 import하고 개인 설정을 손보고 난 후 배포를 시작하면 된다.
-
그리고 이때 중요한 것은 배포할 땐 각종 api, db들을 ip제한을 걸어뒀을 텐데 이를 해제해줘야 Vercel가 접근하여 성공적으로 배포에 성공할 수 있다.
-
Vercel의 또하나의 장점은 만약 우리가 배포중인 프로젝트를 새로 commit, push 했다면 자동으로 감지하고 재배포를 실행한다.
이때 재배포 하는 동안에도 이전 페이지는 계속 실행되고 작업이 완료되면 새 페이지로 교체되기 때문에 걱정하지 않아도 된다. -
사용자 지정 도메인을 연결할 수 있고 또 프로젝트에서 추가 도메인을 구성할 수도 있다.
智(지)! 德(덕)! 體(체)!