Next.js + Typescriptでサイトを作る(初心者編)

概要

Next.js + Typescriptで制作したサイトをVercelに公開するまでの流れをご紹介します。

事前準備

Github に登録する。
Vercel に登録する。

※アカウント登録がお済で無い方のみ。

Vercelとは

Vercelとは何ですか？と思っている初心者の方もいらっしゃるでしょう。
完結に説明致しますと、VercelはNext.jsの公式ホスティングサービスで、
誰でも簡単にサイトを公開できるという素晴らしいサービスであります。
またVercelの個人向けにHobbyプランが用意されており、無料でサイトを公開出来ます。

環境

• Windows10
• Vscode
• Node.js 18.13.0
• npm 8.19.3
• Next.js 13.1.6
• TypeScript 4.9.5

1. 環境構築

今回はエディタやNode.jsはインストールが済んでいる前提とする。

2.　初期設定

2-1. Next.jsのインストール

それでは、Next.js の初期環境をコマンドでインストールしていきます。
エディタのターミナルで以下コマンドを入力してEnterを押します。

npx create-next-app@latest --typescript

次にプロジェクト名の入力行が出力されますので
任意のプロジェクト名を入力しEnterを押します。
筆者はmy-websiteと入力しました。

続けて以下の選択項目が出てきます。

• 1. EsLint
• 2. src/ directory
• 3. experimental app/ directory
• 4. import alias

※app/ directoryは今回作りません。

特にこだわりがない限りは2までEnterを押して行けば良いです。
3は今回はNoを選びましょう。
最後の4は以下の文字列を入力してEnterを押して下さい。

@/*

やっとこさNext.js のインストールが始まりますので終わるまで待ちましょう！

3. ページを表示してみる

エディタで以下コマンドを入力

cd my-website

その後以下コマンドを入力して、localhost:3000でサイトが表示されれば完了です。

npm run dev

4. Vercelにデプロイする

Githubにブランチを発行したら、Vercelの公式サイトにログインする。

4-1. プロジェクトの追加

• Vercel Dashboardより画面右上のAdd Newのプルダウンボタンからprojectをクリック。

• New Projectページへ遷移したら、画面左側に先ほどGithubに発行したプロジェクト名が表示されているので右側のimportボタンを押します。

• 次の画面では下にスクロールするとDeployボタンがありますのでクリックします。
  すると公開するたの作業をVercelが自動でおこなってくれます。
  最後にコングラチュレーションの画面に切り替わったら成功です。

• それではダッシュボード戻り、出来たプロジェクトをクリックします。
  DOMAINSに記載されているURLが本番環境のURLでVisitボタンからページに飛べる様になっています。
  Githubで該当リポジトリを確認したい場合は、View Git Repositoryボタンから簡単に開けるようになっています。

• 最後にVisitボタンで完成したWebページを開いてみましょう。

最後に

こちらの記事を最後まで読んで下さりありがとうございます。
次回は、Next.js + microCMSの記事を投稿を予定しております。
出来ればフォローして下さると今後の励みになりますので、よろしくお願い致します。