はじめに
プログラミング初級者のぺーぺーがこれからNext.jsの学習を進めるにあたっての備忘録としての投稿です。
英語のドキュメントに触れ英語を学習するとともに備忘録にすることでより理解を深めちゃおう作戦です。
【公式ドキュメント】Next.js Chapter-1 Getting Started
これまでに触ってきた言語
- Java (8ヶ月程度)
- VB (2ヶ月程度)
- VBA (1年弱)
- Python (3ヶ月程度)
- Ruby (1ヶ月程度)
フレームワーク
- SpringBoot(3ヶ月)
- React(1ヶ月)
今回作るもの
顧客の支払状況等の見れるダッシュボード
内容としてはホームページ、ログイン画面、ログイン認証で保護されているページ、追加・編集・削除機能があるらしい
Chapter-1 Getting Started
Creating a new project
公式ドキュメントに記載されているコマンドを叩いてプロジェクトを作成します。
npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"
フォルダ構造
/app : 今回作るアプリのすべてのルート、コンポーネント、ロジックが入る。
/app/lib : ファンクションの格納先
/app/ui : カードやテーブル、フォーム等のUIコンポーネントの格納先
/public : 画像ファイル等の静的ファイルの格納先
/scripts : 後述にあるシードスクリプト（何だこれ）の格納先
とりあえず起動
npm run dev
上記コマンドを叩いて落としたアプリを起動。
http://localhost:3000/ に接続してみると
ページが表示されました。
がちでプロジェクトを作るだけだったので何も難しいことはなかったね
Chapter-1 Getting Startedはこれにて完了。
次はChapter-2 CSS Stylingです。