Learn Next.jsを使って習得したことを記録しています。
herohoroブログではスクショ一覧から該当commitやlearnへ飛べるようにまとめています。
📣Next.js Learnで作ったコード【まとめ】
📣Next.jsの知識を使ってブログ改造した記事一覧
詳細はherohoroブログ_Next.jsタグより随時更新中....
- 各commitには該当lessonリンクをコメントにメモ
- 差分をスクショして整理
- 混乱するコードには赤入れしてスクショで記録
| Learn_section名 | Learn_lesson名 | 概要 | 対応commit |
|---|---|---|---|
| Create a Next.js App | Setup | 準備 | first |
| Create a Next.js App | Editing the Page | 見出し文字を編集 | Edit page_h1 |
| Navigate Between Pages | Pages in Next.js | ページ作成 | Add posts/first-post |
| Navigate Between Pages | Link Component | ページ間リンク設置 | Add link_pages |
| Assets, Metadata, and CSS | Assets | 画像追加 | Add profile.jpg |
| Assets, Metadata, and CSS | Metadata | タブ名変更 | Add tabName |
| Assets, Metadata, and CSS | Third-Party JavaScript | ログ仮設置 | Add script_console-log |
| Assets, Metadata, and CSS | Layout Component | Layoutで装飾 | Add first-post_CSS |
| Assets, Metadata, and CSS | Global Styles | global cssで＜ a ＞文字色変更 | global.css ＜ a ＞color |
| Assets, Metadata, and CSS | Polishing Layout | 条件分岐でLayoutや文字回り(utils)の装飾 | Add 条件分岐でLayout_CSS |
| Pre-rendering and Data Fetching | Implement getStaticProps | mdデータの取得後一覧表示 | Add mdデータを収集して一覧表示にする |
| Dynamic Routes | Implement getStaticProps・Implement getStaticPaths | 本文の一部を表示 | Add 本文表示 |
| Dynamic Routes | Render Markdown | 本文全内容を表示 | Add 本文内容表示 |
| Dynamic Routes | Polishing the Post Page | 本文タイトル・日付の装飾 | CSS 本文と日付 |
| Dynamic Routes | Polishing the Index Page | ページ間リンク | Add homeから各ページリンク |
| API Routes | Creating API Routes | APIを使って簡単表示 | Add api |
Basic講座終わりました＼(^o^)／ 🌟 2021/12/30 🌟