How to Build a Basic CRUD App with Next.js?

はじめに このガイドでは、next jsをフロントエンドとして使用し、back4appをバックエンドソリューションとして組み合わせた完全なcrud（作成、読み取り、更新、削除）アプリケーションの構築を説明します。 「 basic crud app nextjs 」という名前のプロジェクトを設定し、動的なデータベーススキーマを設計し、next jsアプリに堅牢なcrud機能を統合します。 back4appプロジェクトの設定やコレクションの設計から、parse sdkまたはrest/graphqlメソッドを使用してnext jsインターフェースを接続するまで、すべてをカバーします。 最後には、安全なユーザー認証と効率的なデータ管理を備えた、商用利用可能なwebアプリケーションが完成します。 主なポイント next jsとback4appを使用して完全なcrudアプリケーションを構築します。 データニーズに合わせた柔軟なバックエンドスキーマの設計を学びます。 データ管理のための直感的なドラッグアンドドロップの管理インターフェースを活用します。 dockerコンテナ化やgithub統合を含むデプロイメントのベストプラクティスを発見します。 前提条件 始める前に、次のものを用意してください 新しいプロジェクトが設定されたback4appアカウント。 ガイダンスについては、 back4appの始め方 https //www back4app com/docs/get started/new parse app を参照してください。 next jsの開発環境。 create next app https //nextjs org/docs/api reference/create next app または同様のツールを使用してください。node js（バージョン14以降）がインストールされていることを確認してください。 javascript、next js、およびapi統合の基本的な理解。 必要に応じて、 next jsのドキュメント https //nextjs org/docs を訪れて概要を確認してください。 ステップ1 – プロジェクトの設定 新しいback4appプロジェクトを開始する back4appアカウントにログインします。 ダッシュボードの「新しいアプリ」ボタンをクリックします。 プロジェクト名を入力します basic crud app nextjs とプロンプトに従います。 新しいプロジェクトを作成 新しいプロジェクトがダッシュボードに表示され、バックエンドのコアとして機能します。 next jsアプリケーションを作成する ターミナルを開いて、次のコマンドを実行します npx create next app\@latest basic crud app nextjs プロジェクトディレクトリに移動します cd basic crud app nextjs このコマンドは、カスタマイズの準備が整ったnext jsプロジェクトフレームワークをセットアップします。 ステップ2 – データベーススキーマの作成 データモデルの構造化 このcrudアプリでは、基本的なコレクションを作成します。以下は、コア機能を可能にするフィールドの詳細を持つ2つの主要なコレクションです。 1 アイテムコレクション このコレクションは各アイテムの詳細を保存します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムの簡単な要約。 作成日時 日付 アイテムが作成された時刻。 更新日時 日付 最新の更新のタイムスタンプ。 2 ユーザーコレクション このコレクションはユーザープロフィールと認証データを管理します。 フィールド データ型 説明 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ユーザーのためのユニークなユーザー名。 メール 文字列 ユニークなメールアドレス。 パスワードハッシュ 文字列 ユーザー認証のための安全にハッシュ化されたパスワード。 作成日時 日付 アカウントが作成された日時。 更新日時 日付 最後のアカウント更新のタイムスタンプ。 これらのコレクションは、back4appダッシュボードで手動で定義できます。各コレクションの新しいクラスを作成し、関連するカラムを追加します。 新しいクラスを作成 適切なデータ型を選択し、列に名前を付け、デフォルトや要件を設定することでフィールドを作成します。 列を作成 back4app aiアシスタントを使用したスキーマ設定 back4app aiアシスタントはデータベーススキーマの生成を効率化します。希望するコレクションとフィールドを説明し、アシスタントに構造を自動生成させましょう。 aiアシスタントを使用する手順 aiアシスタントを開く back4appダッシュボードメニューで見つけます。 データモデルを説明する コレクションとフィールドの要件を詳しく説明したプロンプトを貼り付けます。 レビューと適用 生成されたスキーマを確認し、プロジェクトに実装します。 サンプルプロンプト create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) この方法は時間を節約するだけでなく、スキーマが一貫して最適化されていることを保証します。 ステップ3 – 管理インターフェースとcrud機能の有効化 管理インターフェースの探索 back4appの管理インターフェースは、バックエンドデータを管理するためのノーコードソリューションを提供します。直感的なドラッグアンドドロップシステムを使用して、crud操作を簡単に実行できます。 管理インターフェースの有効化 「その他」セクションに移動 あなたのback4appダッシュボードで。 「管理アプリ」をクリック その後、「 「管理アプリを有効にする。」 管理者の資格情報を設定 最初の管理者ユーザーを設定することによって。これにより、 b4aadminuser のような役割と必要なシステムコレクションが確立されます。 管理者アプリを有効にする アクティベーション後、データを管理するために管理者インターフェースにログインします。 管理者アプリダッシュボード 管理者インターフェースを介してcrud操作を実行する 管理者インターフェース内で、あなたは レコードを作成する コレクション（例：アイテム）内の「レコードを追加」ボタンを使用して新しいデータを挿入します。 レコードを表示または更新する レコードをクリックして、そのフィールドを検査または変更します。 レコードを削除する 削除オプションを使用して古いエントリを削除します。 この簡素化されたインターフェースは、データ管理を簡単かつ効率的にします。 ステップ 4 – next js を back4app に接続する バックエンドが設定されたら、次のステップは next js アプリケーションを接続することです。 オプション a parse sdk を使用する parse sdk をインストールする npm install parse next js アプリで parse を初期化する ファイルを作成します (例 lib/parseconfig js ) // lib/parseconfig js import parse from 'parse'; // replace with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; next js ページに parse を統合する 例えば、アイテムを取得して表示するページを作成します。 // pages/index js import { useeffect, usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function home() { const \[items, setitems] = usestate(\[]); useeffect(() => { const loaditems = async () => { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error('error retrieving items ', error); } }; loaditems(); }, \[]); return ( \<div style={{ padding '2rem' }}> \<h1>item list\</h1> \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item get('title')}\</strong> {item get('description')} \</li> ))} \</ul> \</div> ); } オプションb restまたはgraphqlの使用 parse sdkを使用しない場合は、restまたはgraphqlでcrud操作を管理できます。たとえば、restを介してアイテムを取得するには const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); 必要に応じて、これらのapi呼び出しをnext jsコンポーネントに統合します。 ステップ5 – バックエンドのセキュリティ アクセス制御リスト（acl）の実装 オブジェクトにaclを割り当ててデータを保護します。たとえば、所有者のみがアクセスできるアイテムを作成するには async function addprivateitem(itemdetails, owner) { const items = parse object extend('items'); const newitem = new items(); newitem set('title', itemdetails title); newitem set('description', itemdetails description); // configure acl owner only read and write const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); newitem setacl(acl); try { const saveditem = await newitem save(); console log('private item added ', saveditem); } catch (error) { console error('error adding item ', error); } } クラスレベルの権限（clp）の設定 back4appダッシュボード内で、各コレクションのclpを調整して、データアクセスを認可されたユーザーのみに制限します。 ステップ6 – ユーザー認証の実装 ユーザーアカウントの設定 back4appは、認証のためにparseの組み込みユーザークラスを活用します。next jsアプリで、以下のように登録とログインを管理します // pages/signup js import { usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function signup() { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const registeruser = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration failed ' + error message); } }; return ( \<form onsubmit={registeruser}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> ); } ログインとセッション管理に同様のアプローチを使用できます。また、back4appダッシュボードを介してソーシャルログイン、メール確認、パスワード回復などの追加機能を有効にすることもできます。 ステップ 7 – next js フロントエンドのデプロイ back4appのデプロイオプションを使用すると、github統合またはdockerコンテナ化を通じて、next jsアプリケーションを簡単にホストできます。 7 1 プロダクションバージョンのビルド ターミナルでプロジェクトディレクトリを開きます。 ビルドコマンドを実行します npm run build これにより、最適化された静的およびサーバーレンダリングファイルを含む next フォルダーが生成されます。 7 2 コードの整理とアップロード リポジトリには、next jsアプリのすべてのソースファイルが含まれている必要があります。典型的な構造は次のようになります basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md 例 lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 例 pages/index js （ステップ4で提供されたコードスニペットを参照してください） コードをgithubにコミットする gitリポジトリを初期化する git init すべてのファイルを追加する git add 変更をコミットする git commit m "initial commit of next js crud application" githubリポジトリを作成する 例えば、名前を basic crud app nextjs にする。 コードをプッシュする git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 back4appウェブデプロイメントとの統合 ウェブデプロイメントにアクセスする back4appダッシュボードにログインし、プロジェクトに移動して、ウェブデプロイメント機能を選択します。 githubアカウントを接続する リポジトリをリンクするための指示に従います。 リポジトリとブランチを選択する リポジトリ（例 basic crud app nextjs ）とコードを含むブランチ（例 main ）を選択します。 7 4 デプロイメント設定の構成 ビルドコマンド リポジトリに事前ビルドされた next フォルダが含まれていない場合は、コマンドを指定します（例 npm run build )。 出力ディレクトリ 出力ディレクトリを next に設定して、back4appがコンパイルされたファイルの場所を知ることができるようにします。 環境変数 apiキーなど、必要な環境変数を追加します。 7 5 dockerを使用したnext jsアプリケーションのコンテナ化 デプロイメントにdockerを好む場合は、リポジトリに dockerfile を含めてください # use an official node runtime as the base image from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the source code copy \# build the next js application run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/ next /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] back4appでdockerデプロイメントオプションを選択して、アプリケーションをコンテナ化してデプロイします。 7 6 アプリケーションの起動 アプリをデプロイする back4appの deploy ボタンをクリックします。 ビルドプロセスを監視する back4appがコードを取得し、ビルドコマンドを実行し、アプリケーションをデプロイします。 ライブアプリにアクセスする デプロイが完了すると、next jsアプリケーションがホストされているurlが提供されます。 7 7 デプロイメントの確認 提供されたurlにアクセス： ブラウザでurlを開きます。 機能をテスト： ページが正しく読み込まれ、すべてのcrud操作が機能していることを確認します。 必要に応じてトラブルシューティング： ブラウザの開発者ツールとback4appのログを使用して問題を診断します。 ステップ8 – 結論と次のステップ おめでとうございます！ next jsとback4appを使用して、堅牢なcrudアプリケーションを成功裏に構築しました。プロジェクトを設定し、カスタマイズされたコレクションを設計し、next jsのフロントエンドを安全なバックエンドに接続しました。 次のステップ： フロントエンドを強化： 詳細ビュー、検索機能、リアルタイム更新などの高度な機能でnext jsアプリを拡張します。 バックエンドを拡張： クラウドファンクション、サードパーティの統合、または追加のアクセス制御を探ります。 学び続ける： さらなる最適化とカスタマイズのために、 back4appのドキュメント https //www back4app com/docs とnext jsのリソースを訪問してください。 このチュートリアルに従うことで、next jsとback4appを使用してスケーラブルで安全なcrudアプリケーションを作成するスキルを身につけました。コーディングを楽しんでください！