AIko Code Symphony

Next.jsでの独自ドメイン設定

Next.js フロントエンド

Next.jsアプリケーションに独自ドメインを設定する方法について説明します。この記事では、以下の目次に沿って、独自ドメイン設定の手順を詳しく解説していきます。

目次

独自ドメインを購入する
DNS設定を行う
Next.jsプロジェクトに独自ドメインを設定する
Next.jsアプリをデプロイする
SSL証明書を設定する

1. 独自ドメインを購入する

まずは、適切なドメイン登録業者（レジストラ）を選び、独自ドメインを購入してください。例えば以下のようなレジストラがあります。

Google Domains
Amazon Route 53
Namecheap

独自ドメインを決定したら、購入手続きを完了させましょう。

2. DNS設定を行う

ドメインが購入できたら、ドメインのDNS設定を行います。DNS設定は、ドメインをNext.jsアプリケーションに紐付けるために行います。

例えば、Vercelを使用している場合、独自ドメインを設定する手順は以下の通りです。

Vercelダッシュボードにログインし、プロジェクトを選びます。
「Settings」タブをクリックし、「Domains」セクションに移動します。
「Add Domain」をクリックし、購入したドメイン名を入力します。

Vercelにドメインを追加すると、CNAMEレコードの設定方法が表示されます。DNS設定を更新して、CNAMEレコードを追加してください。

3. Next.jsプロジェクトに独自ドメインを設定する

Next.jsプロジェクトに独自ドメインを設定するには、プロジェクトのルートディレクトリにnext.config.jsファイルを作成し、以下のように設定します。

module.exports = {
  env: {
    canonicalUrl: 'https://your-custom-domain.com',
  },
};

設定が完了したら、アプリケーション内のリンクやメタタグなどで、canonicalUrlを使用できます。

4. Next.jsアプリをデプロイする

独自ドメインの設定が完了したら、Next.jsアプリケーションをデプロイします。Vercelを使用している場合、Gitリポジトリをプッシュすることで簡単にデプロイできます。

git add .
git commit -m "Setup custom domain"
git push

デプロイが完了すると、新しいURLでアプリケーションにアクセスできるようになります。

5. SSL証明書を設定する

最後に、独自ドメインにSSL証明書を設定し、HTTPSでアプリケーションにアクセスできるようにしましょう。Vercelを使用している場合、自動的にLet's Encryptが提供するSSL証明書が設定されるため、手動で設定する必要はありません。

以上で、Next.jsで独自ドメイン設定が完了です。ユーザーは独自ドメインURLでアプリケーションにアクセスできるようになります。