logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll
  1. ホーム
  2. JSON Drop APIドキュメント
  3. JSON Drop APIのインストール

Next.jsフロントエンドサンプルの実行

03/04/2025, by Ivan
Download JSON Drop API

JSON Drop API Documentation

/frontend-examples/articles-with-tags-filterフォルダには、JSON Drop APIを使用するNext.jsアプリケーションがあります。

概要

これは、タグ付き記事の管理とフィルタリング機能を備えた、JSON Drop APIとの統合を実演するNext.jsアプリケーションです。

Next.js app1
Next.js app Frontpage
next.js articles
Next.js application Articles listing page.
Contact Us form
Next.js application Contact form.

前提条件

  • Node.js（v18以上）
  • npmまたはpnpmパッケージマネージャー
  • JSON Drop APIインスタンスへのアクセス

インストール

  1. リポジトリをクローンします
  2. 依存関係をインストールします： 
    npm install
# or
pnpm install
  3. 環境変数を設定します：
    • ルートディレクトリに.envファイルを作成します
    • 次の変数を設定します： 
      NEXT_PUBLIC_DRUPAL_BASE_URL="http://your-jsonapi-instance"

アプリケーションの実行

開発サーバーを起動するには：

npm run dev
# or
pnpm dev

アプリケーションはhttp://localhost:3000で利用できます。

npm run dev
Running an application with Next.js

利用可能なルート

  • / - 記事リストとタグフィルタリング付きのホームページ
  • /articles - 記事一覧ページ
  • /form - 記事の作成・編集用フォームページ

設定

環境変数

  • NEXT_PUBLIC_DRUPAL_BASE_URL - JSON Drop APIインスタンスのベースURL

依存関係

アプリケーションはいくつかの主要な依存関係を使用しています：

  • Next.js 15.1.0
  • React 19
  • API呼び出し用のAxios
  • スタイリング用のTailwindCSS
  • Radix UIコンポーネント
  • フォーム処理用のReact Hook Form

よくある落とし穴

API設定

NEXT_PUBLIC_DRUPAL_BASE_URL環境変数がJSON Drop APIインスタンスに正しく設定されていることを確認してください。設定が正しくないと、APIリクエストが失敗します。

CORSの問題

CORSエラーが発生した場合は、JSON Drop APIインスタンスが開発ドメイン（localhost:3000）からのリクエストを受け入れるように設定されていることを確認してください。

環境変数

NEXT_PUBLIC_プレフィックスが付いた環境変数はブラウザに公開されることを忘れないでください。これらの変数には機密情報を含めないでください。

本番用ビルド

本番用ビルドを作成するには：

npm run build
# or
pnpm build

本番サーバーを起動するには：

npm run start
# or
pnpm start

サポート

問題や質問がある場合は、プロジェクトのドキュメントを参照するか、リポジトリにイシュー（issue）を作成してください。