herohoroブログ

ノーマルなcreate-next-appから本家のレイアウトを再現_Blog learn01



🔄   2023-03-14
No comments to display

Reactを学びはじめて1ヶ月半.....

やっとやっと本家リポジトリのコードの意味を理解できるようになってきました。

😵
全て理解はできておりませんが.....

勉強する前は

「なんでreturnの前に関数入れてるんだろ?」

って部分が意外とモヤッとしておりました。

講座で解説を聞きながら手を動かして

作って消してを繰り返していくうちに

徐々に分かってきたのが....

JavaScriptなの?

Reactなの?

Next.jsなの?

TypeScriptなの?

って部分。

いきなりNext.js learnをやった数ヶ月前がお恥ずかしい限りですm(_ _)m

今回はNext.js learnの復習を兼ねながら、

じわりじわりとeasy-notion-blogに寄せていく演習をしてみました。

完全再現までにはまだまだ課題は多いものの、

まずはDBからデータを取ってくる前の

初々しい状態の実装工程を

紹介していきます\(^o^)/

▼ 出来上がったのはこれ

image block

code sandboxで工程管理をしていったので、

PR内のコメントに追記したリンクへ飛ぶと画面遷移もいじれます🎶

🙃
時間が経過するとフリーズしてしまうようなので、code sandboxをリロードすれば動いてくれますー
No.branchNamedescriptionリンク
01035iffpageNationhttps://github.com/herohoro/Blog_learn/pull/3
02p3b04xeasy-notion仕様にディレクトリ分け_ここでは途中/次のPRで完成してるhttps://github.com/herohoro/Blog_learn/pull/2
03nods6ytypescript化https://github.com/herohoro/Blog_learn/pull/4
04xkt4incontentを色分け_CSSで再現https://github.com/herohoro/Blog_learn/pull/6
05e9r66s全レイアウトの色分け+easy-notion仕様の見た目https://github.com/herohoro/Blog_learn/pull/7
06e8mfr5component化 footerとheaderhttps://github.com/herohoro/Blog_learn/pull/8

Next.jsのドキュメント

Next.jsのテンプレをインストール

すごくすごく何もない状態のから始めることにしました(´・ω・`)

Next.jsで画面遷移

▼ 画面遷移についてはこのページ

この情報を元に実装。

image block
image block

https://github.com/herohoro/Blog_learn/pull/3

TypeScriptに変換

▼ このページを見ながら修正。

tsxに変換するために整えることが意外とあり.....

  • tsconfig.json
  • next-env.d.ts
  • typescriptをインストール
  • @types/react
  • @types/node

内容は現段階では高度すぎるので本家リポジトリのコードを引用することにしました。(くやしー)

レイアウトを色分けして頭の整理

本家wikiを見ながらレイアウトを色分け。

☺️
入れ子になっていく様子が色で識別できてよく分かる🎶
image block
image block

https://github.com/herohoro/Blog_learn/pull/6

ここで気づいてきたのは、

_app.tsxがすごくいい仕事をしているっていうこと。

全ページを丸っと覆っている感じ。

ページごとに記述しなくてもheaderとfooterを表示してくれて便利(*^^*)

全ページのレイアウトを色分け

headerとfooterを本家に寄せてみました。

image block

image block

https://github.com/herohoro/Blog_learn/pull/6

今更ながら、

headerにページリンクを置いておくことで

各ページでリンクを追記しなくていいんだなということに

気付かされました。🤦🏻‍♀️

Componentにしてスッキリ

header・footerのみを実装。

見た目は変わりません.....(残念)

<div className={styles.header}>
      <h1>
        <Link href="/" passHref>
          <a>blog Title</a>
        </Link>
      </h1>
      <ul>
        <li>
          <Link href="/" passHref>
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/blog" passHref>
            <a>Blog</a>
          </Link>
        </li>
        <li>
          <Link href="/about" passHref>
            <a>About</a>
          </Link>
        </li>
      </ul>
    </div>
Headerのreturn部分

この部分をcomponentにしたことで

<header /> って追記すればどこでも使えちゃう。

シールみたい(´・ω・`)

CSSの使い方

component化された要素のCSSはお抱えの**.module.css を作っておくって部分はいつ見ても素敵。

styles.~~ で装飾していく

stylesの出どころはcomponentによって

切り替わっているの!!!!!!(*´∀`*)(*´∀`*)

import styles from "../styles/header.module.css";
const Header = () => {
  return (
    <div className={styles.header}> 👉このstylesは header.moduleの中になる
      <h1>
        <Link href="/" passHref>
          <a>blog Title</a>
        </Link>
Header component

import styles from "../styles/footer.module.css";
const Footer = () => (
  <footer className={styles.footer}>👉このstylesは footer.moduleの中になる
    <span>Practiced by </span>
    <Link href="https://github.com/otoyo/easy-notion-blog">
      <a>easy-notion-blog</a>
    </Link>
Footer component

https://github.com/herohoro/Blog_learn/pull/8

まとめ

ここまで実装してみて感じたのは、

「こういうもの!」っていうのが

「こうなるからこうしてるの!」っていう

メッセージが伝わってきて

楽しかったってこと。

意味が分かるってやっぱ楽しい。

こんな質素な実装でもReactやNext.jsの復習になって有意義でした(*^^*)

ブログにするにはNotionからデータを連れてきたり、

そのデータを使いやすい状態に調整したり、

それに絡めてReactの関数が登場したりと

奥が深すぎるeasy-notion-blog。

今回整理した表はGitHubのwikiにあり!
image block

https://github.com/herohoro/Blog_learn/wiki

本家コードを理解するには....(見通し)

NotionAPI

DBからデータを持ってくる.....

  • libディレクトリ内のデータ
    • カスタマイズしてるっぽい。。。(すごーー)
    • そこからgetStaticPropsとしてpropsを収集してる.....
🤔
Next.jsにもAPIについての記述がドキュメントにあったな......
React
  • componentを一部変更するprops
    • Notionからのデータをlibで調整した後にpropsを当ててる.....
  • [date].tsxあたりから本領発揮してるけど、難易度ヤバい。
    • useEffect(React)
    • useRouter(Nextjs)
    • slug.tsxから調査した方が良さそう。

😂
いろいろやりこみ要素満載です!!!

少しずつ調べながらスイッチ入った時に進めていこうかなと思っています(*^^*)

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/