next cloudinaryダウンロード - next cloudinaryソースコードのダウンロード

next cloudinary

AI ソースコード

v6.16.0

ダウンロード

次の曇り

未定義

cludynaryを搭載しているnext.jsの高性能画像配信と規模のアップロード。

機能•開始•コミュニティとサポート•貢献

これは、Cloudinary Developer Experienceチームがサポートするコミュニティライブラリです。

特徴

画像を自動的に最適化し、最新の形式で配信します
画像から背景を削除します
画像とテキストオーバーレイを画像に動的に追加します
AIベースのトリミングとサイズ変更
色と効果を使用して画像を変換します
オープングラフソーシャルメディアカードをその場で生成します
ドロップインアップロードウィジェット
...すべて大規模な雲のような

はじめる

インストール

次のようにnext-cloudinaryにインストールします：

 npm install next-cloudinary

クラウド名で環境変数を追加します：

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

画像を追加します

 import { CldImage } from 'next-cloudinary';

<CldImage width="600" height="600" src="<Public ID or Cloudinary URL>" alt="<Alt Text>" />

次の曇り文書でCldimageの詳細をご覧ください

ソーシャルメディアカードの生成（グラフを開く）

 <CldOgImage src="<Public ID or Cloudinary URL>" text="Next Cloudinary" />

注：2：1のアスペクト比の標準化されたソーシャルメディアカードのサイジングに準拠するために、幅と高さは必要ありません（または推奨されます）。

次の曇り文書でCldogimageの詳細をご覧ください

その他のユースケース

バックグラウンドの削除
画像オーバーレイ
画像の下線
ソーシャルメディアカード
テキストオーバーレイ

Community＆Support

Github：問題を作成します
Twitter：@colbyfayock

？貢献

貢献する前に、contributing.mdをお読みください。

地元で働いています

インストール

このプロジェクトは、依存関係とワークスペースを管理する方法としてPNPMを使用しています。

プロジェクトがクローン化された状態で、プロジェクトのルートから依存関係をインストールします。

 pnpm install

構成

プロジェクトに取り組むには、アクティブな曇りアカウントが必要です。アカウントを使用すると、以下を備えたdocs内の.env.localファイルを構成します。

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
NEXT_PUBLIC_CLOUDINARY_API_KEY="<Your Cloudinary API Key>"
CLOUDINARY_API_SECRET="<Your Cloudinary API Secret>"

注：Cloudinaryアカウントは無料になる可能性がありますが、一部の機能はバックグラウンド削除のような無料層を超えて機能しない場合があります

クラウド名はすべての使用に必要であり、APIキーとシークレットは現在、ウィジェットの使用にのみ使用されています。アップロードプリセットは、アップロードウィジェットにさらに使用されます。

画像のアップロード

Docsプロジェクトを実行するには、Cloudinaryアカウント内で参照される画像を参照する必要があります。

これを行うには、 scriptsディレクトリに移動し、最初に以下を備えた新しい.envファイルを作成します。

 CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
CLOUDINARY_API_KEY="<Your API Key>"
CLOUDINARY_API_SECRET="<Your API Secret>"

次に、次のようにアップロードスクリプトを実行します。

 pnpm upload

デフォルトでは、 scripts/images.jsonの内部の画像は、クラウドアカウント内の「画像」ディレクトリにアップロードされます。場所を変更するには、 CLOUDINARY_IMAGES_DIRECTORY環境変数をお好みのディレクトリに追加します。

 CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

プロジェクトを実行します

インストールして構成したら、2つの端末タブを開き、1つをnext-cloudinaryにナビゲートし、1つはdocsに移動し、次のコマンドをそれぞれ実行します。

 pnpm dev

このプロジェクトは、https：// localhost：3000または構成されたローカルポートで利用可能になります。

実行中のテスト

すべてのテストはnext-cloudinary/tests next-cloudinary/src Testsの内部にあります。

next-cloudinaryの中で、次のテストを実行します。

 pnpm test

貢献者

_{コルビーフェヨック}	_{ダニエル・オラヴィオ}	_ramadevsign ？	_{カレイ・ヒグーラ} ショ和	_{Azanul Haque} ？	_3T8	_{ジョン・アグバノーシ}
_{ジョーン・レオン}	_{ティム・ベニークス}	_csgochan	_{codingis4nooobs2} ショ和	_ミチツー	_{リー・コンリン}	_{ライアン・スミス}
_{マイケル・リエンド}	_ジャック	_{Matheus Cabral}	_{ホセ・モラレス}	_{エリック・ピスター}	_{ジョシュアオロルニパ}	_ハリ
_{Shoaib Asgar}	_{Adeyanju Adeyemi}	_サイモン	_{リチャード・オリバー・ブレイ}	_ゼッカ	_{Harshit Vashisht}	_{Sahil Silare}
_{Yash Mathur}	_{アブドゥル・サマド}	_{Rishav Chattopadhyay}	_{Prathamesh Gawas}	_{ヌワニの勝利}	_{Pratyay Banerjee}	_{Saai Syvendra}