Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Next.js(ISR) × microCMS × linaria × aspidaで爆速メディア開発

meijin
November 19, 2020

Next.js(ISR) × microCMS × linaria × aspidaで爆速メディア開発

Next.js(ISR) × microCMS × linaria × aspidaで爆速メディア開発しました!

http://for-teachers.manalink.jp/

meijin

November 19, 2020
Tweet

More Decks by meijin

Other Decks in Programming

Transcript

  1. Next.js(ISR) × microCMS ×
    linaria × aspidaで爆速メディア開発
    株式会社NoSchool CTO / meijin

    View full-size slide

  2. 目次
    - 自己紹介
    - リリースしたメディア
    - microCMS / Next.js(ISR) / linaria / aspida
    それぞれの概要と実装方法
    - リリースしてみての所感
    - 告知
    2

    View full-size slide

  3. 自己紹介
    3

    View full-size slide

  4. 自己紹介
    - nickname: 名人
    - job:    株式会社NoSchool CTO
    - twitter:   @meijin_garden
    - career: 奈良高専 → LIFULL → NoSchool CTO
    - skill:    Nuxt.js(TypeScript, composition-api) / Laravel /
    AWS(Fargate) / Firebase / GitHub Actions
    4

    View full-size slide

  5. オンライン家庭教師マナリンクを開発・運営
    5

    View full-size slide

  6. マナリンクについて
    https://manalink.jp
    - 小〜高校生向けオンライン家庭教師マッチングサービス
    - 今はちょうど生徒さんから合格の声が届く時期
    - 嬉しい
    - 弊社単体でかなり稼ぐ先生も出てきてそれも嬉しい
    6

    View full-size slide

  7. リリースしたメディア
    7

    View full-size slide

  8. マナリンクTeachers
    8

    View full-size slide

  9. マナリンクTeachers
    https://for-teachers.manalink.jp/
    - オンライン家庭教師として活動している先生方の
    インタビュー等を発信することで、
    オンライン家庭教師を目指す人を増やすメディア
    9

    View full-size slide

  10. Lighthouse96点
    10

    View full-size slide

  11. 開発期間とか
    - 開発期間は2週間弱(8営業日程度)
    - 画面数は10くらい / レスポンシブ対応
    - 私(meijin)はNext.js/Incremental Static Regeneration/linaria
    いずれも初挑戦
    - お手柔らかにお願いします
    11

    View full-size slide

  12. microCMS / Next.js(ISR)
    linaria / aspida
    それぞれの概要と実装方法
    12

    View full-size slide

  13. 管理画面付きのAPIが作れるサービス
    管理画面でデータを追加すると・・・
    14

    View full-size slide

  14. JSONを返すAPIが生える
    curl "https://XXXXX.microcms.io/api/v1/skills" -H "X-API-KEY: hogehoge"
    15

    View full-size slide

  15. 実装方法と所感
    - Web APIなのでフロントでもバックエンドでもアプリでも
    食わせることができる
    - 個人向けは無料
    - 管理画面のUIが神で、営業出身のCEOも使い込んでいる
    - ただレスポンスの形式や、データの整合性などについては
    エンジニアが噛んだほうがいい
    16

    View full-size slide

  16. Next.js
    (Incremental Static Regeneration)
    17

    View full-size slide

  17. Incremental Static Regeneraion
    - SSGの欠点を補いつつ利点を残した仕組み
    - 初回アクセス時にページ内容をビルド → 普通
    - 次回以降は生成したページを返し(高速)つつ、
    裏側で最新のデータを使って再ビルド
    (間隔はrevalidate設定で調整可能だが、基本は最小の1秒)
    18

    View full-size slide

  18. 図解
    microCMSでデータを入稿
    hello, world!
    19

    View full-size slide

  19. 図解
    1回目のアクセス
    hello, world!
    hello, world!
    hello, world!
    ビルド実行
    20
    通常の速度

    View full-size slide

  20. 図解
    microCMSでデータを更新
    Good evening!
    21

    View full-size slide

  21. 図解
    2回目のアクセス
    Good evening!
    hello, world!
    hello, world!
    爆速
    22

    View full-size slide

  22. 図解
    バックエンドで再ビルドを走らせる
    Good evening!
    Good evening!
    hello, world!
    23
    再ビルド

    View full-size slide

  23. 図解
    3回目のアクセス
    Good evening!
    Good evening!
    Good evening!
    爆速
    24

    View full-size slide

  24. 実装
    後続のlinaria/aspidaの説明後まとめちゃいます
    25

    View full-size slide

  25. Incremental Static Regeneration w/ Vercel所感
    - FrameworkとInfraを同時に抱えるVercelならではの
    競争戦略で、賢いなと思った
    - バックエンドのレスポンスタイムを気にしなくていいのが楽
    - 現状月20ドルで使えており、比較的安価
    - location.hrefなどを使ったコードには要注意
    26

    View full-size slide

  26. 当然ながらPreviewと自動デプロイは神
    Previewがあるのでステージング環境をこしらえなくていい
    27

    View full-size slide

  27. linaria
    - CSS in JSライブラリ
    言ってしまえばstyled-componentsの競合
    - https://github.com/callstack/linaria
    - Write CSS in JS, but with zero runtime, CSS is extracted to CSS
    files during build
    29

    View full-size slide

  28. linariaの選定理由
    - CSS in JSで書ける上に、ビルド時に独立したCSSファイルが
    書き出される
    - そのうえpreloadも付く
    →Lighthouse⭕
    - シンタックスがstyled-componentsとほぼ同一のため、
    VSCodeやPHPStormの拡張機能をそのまま利用できる
    30

    View full-size slide

  29. Next.js × linariaの設定はこちらの記事に
    - 「nextjs linaria」でSEO1位です
    31

    View full-size slide

  30. CSS in JSするときに心がけたこと
    - styled.div等のHTMLタグ指定は使わない
    タグまで指定すると責務が不明瞭になるため
    - レスポンシブ対応はメディアクエリを返すオブジェクトを
    専用で作って使う
    - その他Component自身にmargin当てないなどありますが割愛
    32

    View full-size slide

  31. メディアクエリ
    33
    CSS in JSのときのメディアクエリ。
    例えばmediaLargerThan.pcで、文字列
    `@media (min-width: 992px)`
    が返る

    View full-size slide

  32. Componentの作り方
    34

    View full-size slide

  33. React×CSS in JSしていてわからなかったこと
    - (普段Vue使いなので)ComponentにclassNameを渡さないと
    親からスタイルを上書きできないことに困惑した
    - VueでいうSlotはPropsにJSX.Element型の変数渡して
    実現するしかない?
    35

    View full-size slide

  34. aspida = Web APIにTSの型を付けられるライブラリ
    37
    /hogehoge/10000 でID:10000の記事データを返すAPI
    type Article = { id: string, title: string, body: string }
    aspidaをインストールし、セットアップ
    import aspidaApi from ‘~/api’
    const article = await aspidaApi.hogehoge._articleId(10000).$get()
    article.title // type is String

    View full-size slide

  35. aspida × Incremental Static Regeneration
    各Page Component実装のポイント
    getStaticProps: ISRするページに渡すデータを取得する関数
    getStaticPaths: ISRするページの動的なパスの内容を決める関数
    それぞれTypeScriptに完全対応しており、
    レスポンスに型が当たるaspidaとの相性もよい
    38

    View full-size slide

  36. aspida × Incremental Static Regeneration①
    microCMSで返ってくる
    レスポンスの型を定義します
    39

    View full-size slide

  37. aspida × Incremental Static Regeneration②
    各Page Component実装のポイント
    getStaticProps: ISRするページに渡すデータを取得する関数
    getStaticPaths: ISRするページの動的なパスの内容を決める関数
    それぞれTypeScriptに完全対応しており、
    レスポンスに型が当たるaspidaとの相性もよい
    40

    View full-size slide

  38. aspida × Incremental Static Regeneration③
    getStaticProps →
    getStaticPaths →
    Page Component →
    41

    View full-size slide

  39. getStaticPropsの実例
    42
    await apiClient.articles._cmsId(id).$get()
    でMicroCmsArticle型のレスポンスが得られます
    →GetStaticPropsと整合性が取れ、Type Safe。

    View full-size slide

  40. Next.js×microCMS×aspidaなサンプルあります
    「next microcms "aspida"」で検索
    https://github.com/TeXmeijin/nextjs-microcms-tsx-jamstack-aspida-boilerplate
    43

    View full-size slide

  41. (余談)サイトマップ
    44

    View full-size slide

  42. nextjs-sitemap-generator
    45
    - nextjs-sitemap-generatorというライブラリが便利
    - ISRしたら全ページのJSファイルが生まれるので、
    それを走査することで全自動で全ページが掲載された
    サイトマップを作ってくれる
    - デプロイ時のnpm scriptsにこれの実行も含む

    View full-size slide

  43. リリースしてみての所感
    46

    View full-size slide

  44. 所感
    - ISRは新規メディア立ち上げなら試して良さそう
    - React/Next.jsをベースにしているので、今後の機能拡張も
    ある程度はさばけることが期待できる
    - 入稿画面はmicroCMSで工数ゼロ
    - CSSはlinariaでLighthouseスコア保つ&DX高いスタイリング
    47

    View full-size slide

  45. Special Thanks!
    本スライドの一部レビューをして頂きました
    48
    @kamimura_th
    @_thesugar_

    View full-size slide

  46. エンジニア採用しています!
    Web/アプリエンジニア(2020/11/19時点の情報です)
    - Nuxt.js/Next.js/NestJS/Laravel/AWS(Fargate)/Firebase/Pay.jp
    - React Native/Firebase
    - テストコード(PHPUnit/jest)×GitHub Actions
    - local環境はFirebase Emulatorまで込みでdocker-compose化
    オンライン家庭教師という新しい生き方を広めつつ、
    既存の学習市場のニーズを満たしていく、
    いろんな人の人生に良いきっかけを与えられる領域です!
    50

    View full-size slide

  47. 話してみたい or 募集内容もっと見たい方はこちら
    名人さん | マナリンクCTO(オンラインランチorお茶などぜひ!)
    https://twitter.com/Meijin_garden
    募集内容はnoteで発信中(マナリンク noteで検索)
    https://note.com/noschool_dev
    51

    View full-size slide

  48. ご清聴ありがとうございました!(目次再掲)
    - 自己紹介
    - リリースしたメディア
    - microCMS / Next.js(ISR) / linaria / aspida
    それぞれの概要と実装方法
    - リリースしてみての所感
    - 告知
    52

    View full-size slide