前回の記事ではDockerを使った環境構築がうまくいかず、一旦ローカル環境で開発を進めることに決定しました。
今度はローカル環境を使った開発と同時に、データベースとスムーズに連携して一般公開する手段をChatGPTに聞いてみます。
Next.jsを使ったWebサービスを一般公開するための方法（データベース接続含む）
Next.jsを使ってWebサービスを開発する際、ローカル環境で開発しつつ、スムーズにデータベースと接続し、サービスを一般公開する方法について解説します。以下は開発効率を向上し、公開後も柔軟な運用ができる手法を紹介します。
おすすめの構成要素
ホスティングプラットフォーム：VercelやAWS Amplifyなど
データベースサービス：Supabase、PlanetScale、Firebase Firestore、MongoDB Atlasなど
バックエンド連携：APIルート（Next.jsの/api）かサーバーレス関数
これらを組み合わせることで、バックエンド処理が必要なWebサービスでもシンプルかつ迅速なデプロイが可能になります。
フロントエンドとバックエンドの通信は、Next.jsに備わっている機能で対応できそうです。データベースサービスについてはPostgreSQLを採用しており、機能が豊富なSupabaseが気になったので詳しく調べてみました。
目次
Supabaseとは
SupabaseはPostgreSQLを基盤とした、オープンソースのバックエンドプラットフォームです。データベース管理に加えてユーザー認証や画像・ファイルストレージなど、多機能なバックエンドサービスを提供しています。
専用のドメインを利用してサービスを簡単に公開できるため、個人開発や小規模なプロジェクトにもぴったり。直感的な操作が可能なUIを備えているため、バックエンド開発初心者でも手軽に活用できるのが魅力です。
Supabaseが備えている上記の特徴が今回作りたいサービスに最適だと判断し、バックエンドにSupabaseを採用することにしました。
また、以前紹介したWebアプリ生成ツール「Codev」がNext.jsとSupabaseに対応しているため、こちらも有効活用できればと考えています。
前回はDockerでの環境構築に失敗しましたが、今度はNext.jsとSupabaseを使って再挑戦します。
Next.jsをインストールする
まずはNext.jsのインストール作業をChatGPTへ聞きながら進めます。
Next.jsのインストール方法
以下は、Next.jsのプロジェクトを初期設定からブラウザで動作確認する手順です。
1. Next.jsプロジェクトの作成
Next.jsのプロジェクトを自動生成するには、以下のコマンドを実行します。
npx create-next-app@latest このコマンドを実行すると、対話形式でプロジェクトの設定が進みます。
「@latest」は最新バージョンを指定するためのオプションです。
プロジェクト名の入力例
What is your project named? ... next-appnext-app など任意の名前を入力します。
2. 開発サーバーの起動
プロジェクトディレクトリに移動して、開発サーバーを起動します。
cd next-app
npm run devnpm run dev でローカルサーバーが起動し、デフォルトで http://localhost:3000 でブラウザから確認できます。
3. ブラウザで確認
ブラウザで以下のURLにアクセスします。
http://localhost:3000「Welcome to Next.js」などの初期ページが表示されていれば正常にセットアップされています。
オプション（TypeScriptプロジェクト作成）
TypeScriptを使ったNext.jsプロジェクトを作成する場合も、create-next-appのコマンドを使うだけで設定可能です。
npx create-next-app@latest --typescriptまとめ
1. Next.jsを使うには、npx create-next-app@latestを実行することで自動生成が可能です。
2. 開発サーバーはnpm run devで起動し、http://localhost:3000で動作を確認します。
3. TypeScriptを使う場合も簡単に対応可能です。これにより、高速なフロントエンド開発が進められます。
上記の出力内容を参考にインストールしてみます。
まずは「mkdir」コマンドでプロジェクト用のフォルダを作成します。
mkdir next-app
「cd」コマンドで作成したプロジェクトへ移動。
cd next-app
ChatGPTの出力結果にあるnext.jsをインストールするコマンドを実行します。
npx create-next-app@latest
するとプロジェクト作成に伴い、下記のように複数の質問内容が表示されます。
「What is your project named?」に関しては任意のプロジェクト名を指定しましょう。今回は「next-app」という名前を入力します。
インストールが完了したあとは、下記のコマンドでnext.jsのバージョンを確認しましょう。
npx next --version
最後に下記のコマンドを実行し、ブラウザで表示されるか確認します。
npm run dev
このコマンドを実行すると、下記のようにブラウザへアクセスするURLが表示されます。
URLを開いてNext.jsの画面が表示されていれば無事完了です。
Supabaseの初期設定
SupabaseはNext.jsと異なり直感的に操作できるGPU画面なので、YouTubeで「Supabase 初期設定」などと調べて利用方法を調べました。
このように生成AIとほかのサービスを使い分けて活用することが重要です。はじめにSupabaseの公式サイトへアクセスします。
Supabase：https://supabase.com/
Supabaseより
トップ画面にある「Start your project」ボタンをクリックしてください。
Supabaseより
GitHubやSSO、メールアドレスのいずれかを使ってアカウントを作成できます。
Supabaseより
アカウント作成が完了すると上記のダッシュボードが表示されます。今回利用するプロジェクトを作成するために、画面左上にある「New project」をクリックしてください。
Supabaseより
プロジェクト名やデータベース名を指定する画面が表示されるので、下記を参考に入力して「Create new project」をクリックします。
- Organization： 自分のアカウント名を指定
- Project name： 任意のプロジェクト名を記載
- Database Password： データベースのパスワードを指定
- Region： 日本を指定
Supabaseより
上記画面が表示されると設定完了です。初期設定が完了するまで数分かかるので気長に待ちましょう。
次回はNext.jsとSupabaseの接続から始めます。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
GitHub Copilotの使い方やVSCodeに導入する方法などを解説
【Python】fileの読み込み方法を簡単に解説
【Python】リスト(list)を初期化する方法を簡単に解説
【Python】format関数とf文字列で桁数を指定する方法を解説
【Python】null判定をする基本的な方法を解説
