Next.js 超絶初心者備忘録＊途中です

私はHTML、JavaScript基本のWEBアプリばかり作っていますが、V0の台頭に伴いNext.jsの体得は必須な感じがしました。

体得といっても、どんなものかがわかるレベルですが。

v0からターミナルを使ってインポートまでは誰でもできる気がするのですが、そこに大量のフォルダが生成されて・・・

圧倒されて断念。。。

となりませんでしたかw
私はなりました。
いよいよ無視もできなくなったので、色々調査、研究しながら記載していきたいと思います。

以下、備忘録-----

一番最初にCursorのチャットで
メンション機能を使い、Next.jsフォルダ全体を選択して聞いちゃいましょう。
コンテキストが残るので、その後の質問も、ファイル全体から判断してくれます。

チャット画面

プロジェクトの主要な構成要素：

• package.json: プロジェクトの依存関係と設定を管理

• tsconfig.json: TypeScriptの設定ファイル

• next.config.mjs: Next.jsの設定ファイル

• app/: Next.jsのApp Routerを使用したページとレイアウト

• components/: 再利用可能なReactコンポーネント

• lib/: ユーティリティ関数などのヘルパーコード

ウェブページを作成する際、一般的に以下の部分を編集することが多いです：

• app/page.tsx：

このファイルはメインページのコンテンツを定義します。ここで全体的なレイアウトやコンポーネントの配置を行います。

• components/main-component.tsx：

このファイルには、ページの主要なコンポーネントが含まれています。各セクション（ヘッダー、イベント詳細、FAQ など）を編集してカスタマイズできます。

• app/globals.css：

グローバルなスタイルを定義するファイルです。全体的な色やフォントなどのスタイルを調整できます。

• tailwind.config.ts：

Tailwind CSS の設定ファイルです。カスタムカラーやフォントサイズなどのテーマを調整できます。

• app/layout.tsx：

アプリケーション全体のレイアウトを定義します。メタデータやグローバルなコンポーネント（ナビゲーションバーやフッターなど）を追加できます。

• components/ui/ディレクトリ内のファイル：

ボタンやダイアログなどの再利用可能なUIコンポーネントが定義されています。必要に応じてこれらをカスタマイズできます。

これらのファイルを編集することで、ウェブページの構造、スタイル、機能を調整できます。具体的な変更内容は、作成したいウェブページの要件によって異なります。

なんとなくわかってきたような
わからないような

常にコンソールにエラーが出ているのも気になる。
でも動くんですよね。

難しい。