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

47min
はじめに
このガイドでは、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の始め方 を参照してください。
Next.jsの開発環境。
 Create Next App または同様のツールを使用してください。Node.js（バージョン14以降）がインストールされていることを確認してください。
JavaScript、Next.js、およびAPI統合の基本的な理解。
必要に応じて、 Next.jsのドキュメント を訪れて概要を確認してください。
﻿
ステップ1 – プロジェクトの設定
新しいBack4appプロジェクトを開始する
Back4appアカウントにログインします。
ダッシュボードの「新しいアプリ」ボタンをクリックします。
プロジェクト名を入力します: Basic-CRUD-App-NextJS とプロンプトに従います。
新しいプロジェクトを作成
﻿
新しいプロジェクトがダッシュボードに表示され、バックエンドのコアとして機能します。
Next.jsアプリケーションを作成する
ターミナルを開いて、次のコマンドを実行します:
Bash
npx create-next-app@latest basic-crud-app-nextjs
npx create-next-app@latest basic-crud-app-nextjs
﻿
プロジェクトディレクトリに移動します:
Bash
cd 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ダッシュボードメニューで見つけます。
データモデルを説明する:
コレクションとフィールドの要件を詳しく説明したプロンプトを貼り付けます。
レビューと適用:
生成されたスキーマを確認し、プロジェクトに実装します。
サンプルプロンプト
Text
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)
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 をインストールする:
Bash
npm install parse
npm install parse
﻿
Next.js アプリで Parse を初期化する:
ファイルを作成します (例: lib/parseConfig.js):
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;
// 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 を統合する:
例えば、アイテムを取得して表示するページを作成します。
JS
// 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>
  );
}
// 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を介してアイテムを取得するには:
JS
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();
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を割り当ててデータを保護します。たとえば、所有者のみがアクセスできるアイテムを作成するには:
JS
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);
  }
}
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アプリで、以下のように登録とログインを管理します:
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>
  );
}
// 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 プロダクションバージョンのビルド
ターミナルでプロジェクトディレクトリを開きます。
ビルドコマンドを実行します:
Bash
npm run build
npm run build
﻿
これにより、最適化された静的およびサーバーレンダリングファイルを含む .next フォルダーが生成されます。
﻿
7.2 コードの整理とアップロード
リポジトリには、Next.jsアプリのすべてのソースファイルが含まれている必要があります。典型的な構造は次のようになります:
Text
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
﻿
例: lib/parseConfig.js
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;
// 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リポジトリを初期化する:
Bash
git init
git init
﻿
すべてのファイルを追加する:
Bash
git add .
git add .
﻿
変更をコミットする:
Bash
git commit -m "Initial commit of Next.js CRUD application"
git commit -m "Initial commit of Next.js CRUD application"
﻿
GitHubリポジトリを作成する:
例えば、名前を basic-crud-app-nextjs にする。
コードをプッシュする:
Bash
git remote add origin https://github.com/your-username/basic-crud-app-nextjs.git
git push -u origin main
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 を含めてください:
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;"]
# 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のドキュメントとNext.jsのリソースを訪問してください。
このチュートリアルに従うことで、Next.jsとBack4appを使用してスケーラブルで安全なCRUDアプリケーションを作成するスキルを身につけました。コーディングを楽しんでください！
フィールド	データ型	説明
_id	オブジェクトID	自動生成された一意の識別子。
タイトル	文字列	アイテムの名前またはタイトル。
説明	文字列	アイテムの簡単な要約。
作成日時	日付	アイテムが作成された時刻。
更新日時	日付	最新の更新のタイムスタンプ。
フィールド	データ型	説明
_id	オブジェクトID	自動生成された一意の識別子。
ユーザー名	文字列	ユーザーのためのユニークなユーザー名。
メール	文字列	ユニークなメールアドレス。
パスワードハッシュ	文字列	ユーザー認証のための安全にハッシュ化されたパスワード。
作成日時	日付	アカウントが作成された日時。
更新日時	日付	最後のアカウント更新のタイムスタンプ。
How to Build a Basic CRUD App with PHP?
How to Build a Basic CRUD App with Angular?