선점 도메인으로 무엇을 해야 합니까?

부수 프로젝트에 대한 아이디어가 있고 "이번에는 실제로 해봐야겠다"라고 생각하여 도메인을 구입하면 한 달이 지나고... 알고 있습니다. 모두 거기에 있었다.

그 도메인으로 무엇을 합니까? 예전에는 제 개인 홈페이지로 리다이렉션만 했었는데 그것도 꽤 오랫동안 방치되어 있어 부끄럽습니다.

그래서 나는 그것을 조사하기 시작했습니다. 내가 원하는 것은 다음과 같습니다.

각 도메인에 대해 사용자 정의된 매우 간단한 "출시 예정"페이지입니다.

적절한 메타 태그와 SEO는 서버측 렌더링을 의미합니다.

모든 도메인에 대해 하나의 서버, 하나의 프로젝트, 하나의 배포.

해결책

프로젝트를 호스트하려고 시도Vercel.com하려고 했으므로 Next.js 템플릿을 사용하여 새 프로젝트를 시작했습니다. 몇 번만 클릭하면 내 Github 계정에 추가되고 내 컴퓨터에 복제되었습니다.

Vercel 프로젝트 설정에서 여러 도메인을 추가할 수 있습니다. 완벽한! 거기에 추가하고 Vercel의 네임서버를 가리켰습니다. 이제 내 템플릿 프로젝트가 모든 도메인에서 실행 중이었습니다.

Netlify에 대해서도 좋은 소식을 들었습니다. 도메인에 대해 비슷한 작업을 수행하려는 경우 둘 다 확인하십시오.

코드

이제 표시되는 페이지를 변경해야 했습니다. 그리고 가장 중요한 것은 페이지에 표시하기 위해 서버 요청에서 현재 도메인 이름을 가져와야 했습니다.

// index.js
import Head from 'next/head'

// Pass host as prop
export async function getServerSideProps(context) {
  return { props: { host: context.req.headers.host } }
}

export default function Home({host}) {
  return (
    <main>
      <Head>
        <title>{host}</title>
      </Head>

      <h1>{host}</h1>
      <p>Coming soon</p>
    </main>
  )
}

그리고 <Head>에도 일부 SEO 태그와 Google Analytics를 추가했습니다.

<Head>
  <title>{host}</title>
  <meta name="description" content="Coming soon" />
  <link href="/favicon.png" rel="shortcut icon" type="image/x-icon"/>
  <link href="/touchicon.png" rel="apple-touch-icon"/>
  <meta content="width=device-width, initial-scale=1" name="viewport"/>
  <meta content={host} property="og:title"/>
  <meta content={host} property="twitter:title"/>
  <meta content="Coming soon" property="og:description"/>
  <meta content="Coming soon" property="twitter:description"/>

  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-[your-code]"/>
  <script
    dangerouslySetInnerHTML={{
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'UA-[your-code]', {
          'anonymize_ip': false
        });
      `,
    }}
  />
</Head>

일부 CSS를 사용하면 멋지게 보이고 잘 작동했습니다. 그러나 나는 클라이언트 측에서 어떤 업데이트도 필요하지 않았음에도 불구하고 Next.js가 페이지에 일부 자바스크립트를 추가하고 있음을 알았습니다.

클라이언트 측 자바 스크립트를 비활성화하는 것으로 보이는 이 옵션을 찾았습니다.

// index.js
export const config = { unstable_runtimeJS: false }

이제 각 도메인에 맞춤형 페이지를 제공하는 하나의 프로젝트가 있습니다. Github에 푸시하기만 하면 모든 도메인에 배포됩니다.

새 도메인을 등록할 때마다 Vercel 프로젝트에 추가하기만 하면 코드를 건드릴 필요 없이 활성화됩니다.

다른 솔루션이 있습니까? 댓글로 알려주세요!

Reference

이 문제에 관하여(선점 도메인으로 무엇을 해야 합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/fabiogiolito/what-to-do-with-your-parked-domains-3l7o

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

선점 도메인으로 무엇을 해야 합니까?

해결책

코드

Reference

좋은 웹페이지 즐겨찾기