ai prompt sharing

展開を表示します

これはcreate-next-appでBootstrappedのnext.jsプロジェクトです。

はじめる

まず、開発サーバーを実行します。

npm run dev
# or
yarn dev
# or
pnpm dev

http：// localhost：3000を開き、ブラウザを使用して結果を確認します。

app/page.jsを変更して、ページの編集を開始できます。ファイルを編集するときにページ自動更新。

このプロジェクトではnext/fontを使用して、カスタムGoogleフォントであるInterを自動的に最適化およびロードします。

もっと詳しく知る

next.jsの詳細については、次のリソースをご覧ください。

• next.jsドキュメント - next.js機能とAPIについて学びます。
• next.jsを学ぶ - インタラクティブなnext.jsチュートリアル。

next.js githubリポジトリを確認できます - フィードバックと貢献を大歓迎です！

Vercelに展開します

next.jsアプリを展開する最も簡単な方法は、next.jsの作成者からvercelプラットフォームを使用することです。

詳細については、next.js deploymentドキュメントをご覧ください。

プロジェクト構造：

• /app/ - それぞれのフォルダーにそれぞれのページを持っているnext.jsアプリ（nextjsにはフォルダーベースのルーティングがあり、URLのパス名がフォルダー名になり、それに応じてページがレンダリングされます）
  • /app/api/ - next.js apiルート/バックエンド
  • /app/folder/ - フォルダーベースのルーティング、それぞれのルートのページ（フォルダー名）
• /components/ - いくつかのロジックを備えた再利用可能なUIコンポーネント
• '/モデル/` - データベースのスキーマモデル
• /public/ -next.jsパブリックディレクトリ
• /styles/ -next.js stylesディレクトリ
• /utils/ - mongodbデータベースに接続するために呼び出すConnectTodbのようないくつかのユーティリティ関数のみ

環境変数：

• 次の変数を持つルートに.ENVを作成します。

 GOOGLE_ID=
GOOGLE_CLIENT_SECRET=
MONGODB_URI=
NEXTAUTH_URL=
NEXTAUTH_URL_INTERNAL=
NEXTAUTH_SECRET=

使用されるパッケージ：

• next - next.jsフレームワーク
• next-auth -Next.js認証ライブラリ
• mongodb -Mongodbドライバー
• mongoose -Mongodb ODM
• react -React.jsフレームワーク
• react-dom -react.js dom renderer
• tailwindcssスタイリング用

Vercelに展開されます

• 展開を表示します

クレジット：JavaScript Mastery -Adrian Hajdin