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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

自己紹介 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

リリースしたメディア 7

Slide 8

Slide 8 text

マナリンクTeachers 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Lighthouse96点 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

microCMS 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Next.js (Incremental Static Regeneration) 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

linaria 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Componentの作り方 34

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

aspida 36

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

(余談)サイトマップ 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

告知 49

Slide 50

Slide 50 text

エンジニア採用しています！ 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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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