easy-notion-blogはNext.js製。

どうしてもNotionでブログをやりたくて出会ったのがこのeasy-notion-blog。

改造できる部分を残してくれていて

私のようなド素人でも改造を楽しめて

プログラミングの勉強にもなるeasy-notion-blog。

数日改造して感じた壁。

「所詮装飾の改造くらいしかできない・・・」

ということ。

いやいや、

まだまだやれるはず！！！

と開き直って情報収集をしていると

Next.js公式の無料講座を発見( ﾟдﾟ)ﾊｯ!

https://nextjs.org/

今日は、

この無料講座を受講して

記録したノートを紹介します＼(^o^)／

GitHubに講座内で作成したコードをあげ、

変化をスクショと共に記録し、

混乱箇所には赤字のメモを追加して

commitとcommentに投稿しながら記録していったノートです(*´ｪ`*)

以降、無料講座 =「learn」と表記します⭐

• 全て英語
• BASICS編・SEARCH ENGINE OPTIMIZATION編・EXCEL編がある
• BASICS編：７章
• SEARCH ENGINE OPTIMIZATION編：６章
• EXCEL編：１章

ドキュメントのどの部分と関連しているのか、

lesson内で扱うライブラリなどのリファレンスはどこにあるのか、

など何度見返しても学べる工夫があります。

文字だけではなかなかイメージしにくい部分には図の説明もあります。

リンクへ飛ぶとgithubのコードを覗けます。

間違えると意外と凹みます(´・ω・｀)

英語は分かる範囲で解読しつつ、

必要に応じてgoogle翻訳を使えばOK＼(^o^)

今回BASIC編を全て学び終えた内容を整理しています。(●´ω｀●)

lessonで作ったファイルをlesson毎にcommitし、

どこが変わったかをスクショし、

時には赤字で印やメモを追記し、

commentに投稿していきながらまとめました。

BASICS編全てのlessonが演習形式ではなく、

解説のみのlessonもあったので、

commitには演習形式のlessonに絞って投稿しています。

https://github.com/herohoro/next.js_learn/blob/master/README.md#活用利点

githubのREADMEでは文字のみの表になってしまったので、

この記事では変化を記録したスクショを一覧にしてまとめてみようと思います(*´∀｀)

目次代わりになるかもね(●´ω｀●)

commitリンク：first

lesson(Setup)

commitリンク：Edit page_h1

lesson(Editing the Page)

commitリンク：Add posts/first-post

lesson(Pages in Next.js)

commitリンク：Add link_pages

lesson(Link Component)

commit リンク：Add profile.jpg

lesson(Assets)

commitリンク：Add tabName

lesson(Metadata)

commitリンク：Add script_console-log

lesson(Third-Party JavaScript)

commitリンク：Add first-post_CSS

lesson(Layout Component)

commitリンク：global.css color

lesson(Global Styles)

commitリンク：Add 条件分岐でLayout_CSS

lesson(Polishing Layout)

commitリンク：Add mdデータを収集して一覧表示にする

lesson(Implement getStaticProps)

commitリンク：Add 本文表示

lesson(Implement getStaticProps・Implement getStaticPaths)

commitリンク：Add 本文内容表示

lesson(Render Markdown)

commitリンク：CSS 本文と日付

lesson(Polishing the Post Page)

commitリンク：Add homeから各ページリンク

lesson(Polishing the Index Page)

commitリンク：Add api

lesson(Creating API Routes)

こんな感じでgithubにあるよ＼(^o^)／使ってみてね

READMEの表を随時更新中

今後は・・・

lesson内の説明に埋め込まれているドキュメントも読み進めながら、

改造スキルを上げていこうと思います⭐

今回整理するまでの流れをMermaidで可視化してみました。

※　ただの暇つぶしです(*´ｪ`*)♥

Mermaidの使い方： Mermaidでタスクフローを簡単に見える化する方法

githubにcommentで資料を収納する時はなんとなく面倒だったんですが、

Notionでの対応表作成以降は劇的に効率が上がり、

あっという間にREADMEや記事投稿まで仕上げられたので、

今後の参考になる流れがあるかもなと思い、

Mermaid化してメモしておくことにしました。