# Next.jsを使用して現代のSaaSアプリを構築する方法 Next.jsは強力なReactフレームワークで、現代のウェブアプリケーションの構築をより簡単かつ効率的にします。本記事では、Next.jsを使用してシンプルなSaaSアプリを構築する方法を完全なステップガイドで説明します。開発環境のセットアップから基本機能の作成までの全プロセスをカバーします。 ## 1. 環境準備 始める前に、あなたの開発環境が準備されていることを確認する必要があります。以下の手順に従ってください： ### 1.1 Node.jsとnpmのインストール あなたのコンピュータにNode.jsとnpmがインストールされていることを確認してください。ターミナルで以下のコマンドを実行してバージョンを確認できます： ```bash node -v npm -v ``` まだインストールしていない場合は、[Node.js公式サイト](https://nodejs.org/)からダウンロードしてインストールしてください。 ### 1.2 Next.jsプロジェクトの作成 ターミナルで以下のコマンドを実行して新しいNext.jsプロジェクトを作成します： ```bash npx create-next-app@latest my-saas-app cd my-saas-app ``` これにより、`my-saas-app`という名前の新しいプロジェクトが作成され、必要な依存関係が自動的にインストールされます。 ## 2. プロジェクト構造 `my-saas-app`ディレクトリ内には、以下の基本構造が表示されます： ``` my-saas-app/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js │ └── ... ├── public/ ├── styles/ └── ... ``` - **pages/**: アプリのページを格納します。 - **public/**: 画像やアイコンなどの公共リソースを格納します。 - **styles/**: CSSファイルを格納します。 ## 3. コア機能の構築 このセクションでは、シンプルなユーザー登録とログインシステムを実装します。 ### 3.1 データベースの設定 この例では、Supabaseをバックエンドサービスとして使用します。以下の手順に従ってください： 1. [Supabase公式サイト](https://supabase.io/)にアクセスしてアカウントを作成します。 2. 新しいプロジェクトを作成し、データベースのURLとAPIキーをメモします。 3. データベースに接続し、以下のユーザーテーブルを作成します： ```sql create table users ( id serial primary key, email text unique not null, password text not null ); ``` ### 3.2 Supabaseクライアントのインストール Next.jsプロジェクトにSupabaseクライアントライブラリをインストールします： ```bash npm install @supabase/supabase-js ``` ### 3.3 ユーザー登録ページの作成 `pages/`ディレクトリ内に新しいファイル`register.js`を作成し、以下の内容を追加します： ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Register = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleRegister = async () => { const { user, error } = await supabase.auth.signUp({ email, password, }); if (error) { console.error(error); } else { alert('登録成功！'); } }; return ( ); }; export default Register; ``` ### 3.4 ユーザーログインページの作成 同様に、`pages/`ディレクトリ内に新しいファイル`login.js`を作成し、以下の内容を追加します： ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleLogin = async () => { const { user, error } = await supabase.auth.signIn({ email, password, }); if (error) { console.error(error); } else { alert('ログイン成功！'); } }; return ( ); }; export default Login; ``` ## 4. アプリのデプロイ ### 4.1 デプロイプラットフォームの選択 私たちはVercelを使用してNext.jsアプリをデプロイします。以下の手順に従ってください： 1. [Vercel公式サイト](https://vercel.com/)にアクセスしてアカウントを登録します。 2. 新しいプロジェクトを作成し、あなたのGitHubリポジトリを選択します。 3. 環境変数にSupabaseのURLとAPIキーを追加していることを確認します。 4. デプロイをクリックし、Vercelがデプロイを完了するのを待ちます。 ### 4.2 デプロイの確認 デプロイが完了すると、公開URLが取得できます。このURLにアクセスして、アプリが正常に動作していることを確認してください。 ## 5. まとめ この記事の手順を通じて、Next.jsを使用してシンプルなSaaSアプリを構築し、ユーザー登録とログイン機能を実装しました。Next.jsの強力な点は、その柔軟性と効率性であり、より複雑なニーズに応じて簡単に拡張できます。この基盤の上にさらに深く掘り下げて、より素晴らしいアプリを構築していけることを願っています！