Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.js(ISR) × microCMS × linaria × aspidaで爆速メデ...
Search
meijin
November 19, 2020
Programming
0
3.8k
Next.js(ISR) × microCMS × linaria × aspidaで爆速メディア開発
Next.js(ISR) × microCMS × linaria × aspidaで爆速メディア開発しました!
http://for-teachers.manalink.jp/
meijin
November 19, 2020
Tweet
Share
More Decks by meijin
See All by meijin
Technical Decisions and Reflections on "Test Maker" After Two Years of Development
texmeijin
1
28
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
25k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
3
1.8k
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
texmeijin
0
370
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
1.1k
個人開発がおすすめな理由
texmeijin
3
950
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
390
初めてESLintプラグインにコントリビュートした話
texmeijin
0
170
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
74
Other Decks in Programming
See All in Programming
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
0
100
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
3.9k
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
130
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
360
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
480
Introduction to kotlinx.rpc
arawn
0
760
Unity Android XR入門
sakutama_11
0
180
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
150
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Six Lessons from altMBA
skipperchong
27
3.6k
Adopting Sorbet at Scale
ufuk
74
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
How GitHub (no longer) Works
holman
314
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Done Done
chrislema
182
16k
Code Reviewing Like a Champion
maltzj
521
39k
For a Future-Friendly Web
brad_frost
176
9.6k
Transcript
Next.js(ISR) × microCMS × linaria × aspidaで爆速メディア開発 株式会社NoSchool CTO /
meijin
目次 - 自己紹介 - リリースしたメディア - microCMS / Next.js(ISR) /
linaria / aspida それぞれの概要と実装方法 - リリースしてみての所感 - 告知 2
自己紹介 3
自己紹介 - nickname: 名人 - job: 株式会社NoSchool CTO - twitter:
@meijin_garden - career: 奈良高専 → LIFULL → NoSchool CTO - skill: Nuxt.js(TypeScript, composition-api) / Laravel / AWS(Fargate) / Firebase / GitHub Actions 4
オンライン家庭教師マナリンクを開発・運営 5
マナリンクについて https://manalink.jp - 小〜高校生向けオンライン家庭教師マッチングサービス - 今はちょうど生徒さんから合格の声が届く時期 - 嬉しい - 弊社単体でかなり稼ぐ先生も出てきてそれも嬉しい
6
リリースしたメディア 7
マナリンクTeachers 8
マナリンクTeachers https://for-teachers.manalink.jp/ - オンライン家庭教師として活動している先生方の インタビュー等を発信することで、 オンライン家庭教師を目指す人を増やすメディア 9
Lighthouse96点 10
開発期間とか - 開発期間は2週間弱(8営業日程度) - 画面数は10くらい / レスポンシブ対応 - 私(meijin)はNext.js/Incremental Static
Regeneration/linaria いずれも初挑戦 - お手柔らかにお願いします 11
microCMS / Next.js(ISR) linaria / aspida それぞれの概要と実装方法 12
microCMS 13
管理画面付きのAPIが作れるサービス 管理画面でデータを追加すると・・・ 14
JSONを返すAPIが生える curl "https://XXXXX.microcms.io/api/v1/skills" -H "X-API-KEY: hogehoge" 15
実装方法と所感 - Web APIなのでフロントでもバックエンドでもアプリでも 食わせることができる - 個人向けは無料 - 管理画面のUIが神で、営業出身のCEOも使い込んでいる -
ただレスポンスの形式や、データの整合性などについては エンジニアが噛んだほうがいい 16
Next.js (Incremental Static Regeneration) 17
Incremental Static Regeneraion - SSGの欠点を補いつつ利点を残した仕組み - 初回アクセス時にページ内容をビルド → 普通 -
次回以降は生成したページを返し(高速)つつ、 裏側で最新のデータを使って再ビルド (間隔はrevalidate設定で調整可能だが、基本は最小の1秒) 18
図解 microCMSでデータを入稿 hello, world! 19
図解 1回目のアクセス hello, world! hello, world! hello, world! ビルド実行 20
通常の速度
図解 microCMSでデータを更新 Good evening! 21
図解 2回目のアクセス Good evening! hello, world! hello, world! 爆速 22
図解 バックエンドで再ビルドを走らせる Good evening! Good evening! hello, world! 23 再ビルド
図解 3回目のアクセス Good evening! Good evening! Good evening! 爆速 24
実装 後続のlinaria/aspidaの説明後まとめちゃいます 25
Incremental Static Regeneration w/ Vercel所感 - FrameworkとInfraを同時に抱えるVercelならではの 競争戦略で、賢いなと思った - バックエンドのレスポンスタイムを気にしなくていいのが楽
- 現状月20ドルで使えており、比較的安価 - location.hrefなどを使ったコードには要注意 26
当然ながらPreviewと自動デプロイは神 Previewがあるのでステージング環境をこしらえなくていい 27
linaria 28
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
linariaの選定理由 - CSS in JSで書ける上に、ビルド時に独立したCSSファイルが 書き出される - そのうえpreloadも付く →Lighthouse⭕ -
シンタックスがstyled-componentsとほぼ同一のため、 VSCodeやPHPStormの拡張機能をそのまま利用できる 30
Next.js × linariaの設定はこちらの記事に - 「nextjs linaria」でSEO1位です 31
CSS in JSするときに心がけたこと - styled.div等のHTMLタグ指定は使わない タグまで指定すると責務が不明瞭になるため - レスポンシブ対応はメディアクエリを返すオブジェクトを 専用で作って使う -
その他Component自身にmargin当てないなどありますが割愛 32
メディアクエリ 33 CSS in JSのときのメディアクエリ。 例えばmediaLargerThan.pcで、文字列 `@media (min-width: 992px)` が返る
Componentの作り方 34
React×CSS in JSしていてわからなかったこと - (普段Vue使いなので)ComponentにclassNameを渡さないと 親からスタイルを上書きできないことに困惑した - VueでいうSlotはPropsにJSX.Element型の変数渡して 実現するしかない? 35
aspida 36
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
aspida × Incremental Static Regeneration 各Page Component実装のポイント getStaticProps: ISRするページに渡すデータを取得する関数 getStaticPaths:
ISRするページの動的なパスの内容を決める関数 それぞれTypeScriptに完全対応しており、 レスポンスに型が当たるaspidaとの相性もよい 38
aspida × Incremental Static Regeneration① microCMSで返ってくる レスポンスの型を定義します 39
aspida × Incremental Static Regeneration② 各Page Component実装のポイント getStaticProps: ISRするページに渡すデータを取得する関数 getStaticPaths:
ISRするページの動的なパスの内容を決める関数 それぞれTypeScriptに完全対応しており、 レスポンスに型が当たるaspidaとの相性もよい 40
aspida × Incremental Static Regeneration③ getStaticProps → getStaticPaths → Page
Component → 41
getStaticPropsの実例 42 await apiClient.articles._cmsId(id).$get() でMicroCmsArticle型のレスポンスが得られます →GetStaticPropsと整合性が取れ、Type Safe。
Next.js×microCMS×aspidaなサンプルあります 「next microcms "aspida"」で検索 https://github.com/TeXmeijin/nextjs-microcms-tsx-jamstack-aspida-boilerplate 43
(余談)サイトマップ 44
nextjs-sitemap-generator 45 - nextjs-sitemap-generatorというライブラリが便利 - ISRしたら全ページのJSファイルが生まれるので、 それを走査することで全自動で全ページが掲載された サイトマップを作ってくれる - デプロイ時のnpm
scriptsにこれの実行も含む
リリースしてみての所感 46
所感 - ISRは新規メディア立ち上げなら試して良さそう - React/Next.jsをベースにしているので、今後の機能拡張も ある程度はさばけることが期待できる - 入稿画面はmicroCMSで工数ゼロ - CSSはlinariaでLighthouseスコア保つ&DX高いスタイリング
47
Special Thanks! 本スライドの一部レビューをして頂きました 48 @kamimura_th @_thesugar_
告知 49
エンジニア採用しています! 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
話してみたい or 募集内容もっと見たい方はこちら 名人さん | マナリンクCTO(オンラインランチorお茶などぜひ!) https://twitter.com/Meijin_garden 募集内容はnoteで発信中(マナリンク noteで検索) https://note.com/noschool_dev
51
ご清聴ありがとうございました!(目次再掲) - 自己紹介 - リリースしたメディア - microCMS / Next.js(ISR) /
linaria / aspida それぞれの概要と実装方法 - リリースしてみての所感 - 告知 52