☝️

Vercelの新規登録からNext.jsデプロイまで

2023/08/06に公開

Next.js

Vercel

tech

Vercelとは

Vercel's frontend cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

ざっくりの理解だとフロントエンドを手っ取り早く構築するためのオールインワンプラットフォームです。

Vercelのいいところ

Next.jsの開発元。フロントエンドをよりよく使える工夫がされている
Gitリポジトリを連携すれば特に設定なしでデプロイ可能
Gitにpushがイコールデプロイになる。CICD不要
ドメインも自動で付与（カスタムも可能）
個人開発レベルであれば無料

個人レベルでは手軽かつ無料というのは他のサービスにはないメリットなのではと思っています。

無料ってどこまでやっていいの？これをやるなら商用利用

規約まわりはこちらです。これをやったらNGっていうのがいくつか書いています。

Any method of requesting or processing payment from visitors of the site.
Advertising the sale of a product or service.
サイト訪問者に支払いを要求してはいけない
Receiving payment to create, update, or host the site.
製品またはサービスの販売を宣伝してはいけない
Affiliate linking is the primary purpose of the site.
サイトを作成して支払いを受けてはいけない
The inclusion of advertisements, including but not limited to online
アフェリエイトが目的ではってはいけない
advertising platforms like Google AdSense.
Google AdSenseなど広告プラットフォームを組み込んではいけない
Asking for Donations does not fall under commercial usage.
ただし、寄付を求めることは商用利用には該当しない

商用利用であれば、Pro以降のプランを選択することになりますが、割高だと言われています。AWSなど他のホスティングができるサービスと合わせて検討したほうがよいでしょう。ただしReactでISR（Incremental Static Regeneration）の技術要素を利用する場合は、他のクラウドで実現するのが難しいとされていますのでPro以降を検討すると良いでしょう。

新規登録する前に事前準備すること

Gitプロパイダの登録
なにかしらのアカウントを作成しておきましょう。以降はGitHubを作成していることを例にすすめていきます
リポジトリの作成
どのリポジトリをLINKさせるか登録時に設定します。私は以下を一旦作成してしてみました。
https://github.com/icck/vercel-portfolio
Next.jsのアプリ
npx create-next-app@latest --tsをとりあえずしておきましょう。Topページなどなにかないとデプロイが失敗してしまいます。カスタマイズなしで最初に付いてくるTopページが表示されるものをまず用意できればOKです。

新規登録してみる

https://vercel.com/　にアクセスしサインインしてみます。
無料で使いたいため、ホビープランを選択。

Gitプロパイダとコネクトしたいと言われました。

GitHubを選びます。

テンプレートかGitリポジトリをImportしてくださいと言われました。今回はGitリポジトリを選んでみます。

自分のアカウントを選択して

LINKしたいものを選ぶところは、一旦作成したリポジトリのみを選んでみます。

登録されましたね。Importボタンがでてきましたので押してみます。

私はNext.jsでなにか作る予定なのでNext.jsを選択しました。デプロイします。
※プロジェクト名はicck-portfolioに変えました。この名前でデフォルトDNSが取得されるためです。
※ルートディレクトリはportfolioに変えました。next.jsのプロジェクトが配下に作成されたためです。