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. 目次 - 自己紹介 - リリースしたメディア - microCMS / Next.js(ISR) /

    linaria / aspida それぞれの概要と実装方法 - リリースしてみての所感 - 告知 2
  2. 自己紹介 - nickname: 名人 - job:    株式会社NoSchool CTO - twitter:

      @meijin_garden - career: 奈良高専 → LIFULL → NoSchool CTO - skill:    Nuxt.js(TypeScript, composition-api) / Laravel / AWS(Fargate) / Firebase / GitHub Actions 4
  3. Incremental Static Regeneraion - SSGの欠点を補いつつ利点を残した仕組み - 初回アクセス時にページ内容をビルド → 普通 -

    次回以降は生成したページを返し(高速)つつ、 裏側で最新のデータを使って再ビルド (間隔はrevalidate設定で調整可能だが、基本は最小の1秒) 18
  4. linariaの選定理由 - CSS in JSで書ける上に、ビルド時に独立したCSSファイルが 書き出される - そのうえpreloadも付く →Lighthouse⭕ -

    シンタックスがstyled-componentsとほぼ同一のため、 VSCodeやPHPStormの拡張機能をそのまま利用できる 30
  5. 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
  6. aspida × Incremental Static Regeneration 各Page Component実装のポイント getStaticProps: ISRするページに渡すデータを取得する関数 getStaticPaths:

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

    ISRするページの動的なパスの内容を決める関数 それぞれTypeScriptに完全対応しており、 レスポンスに型が当たるaspidaとの相性もよい 40
  8. エンジニア採用しています! 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
  9. ご清聴ありがとうございました!(目次再掲) - 自己紹介 - リリースしたメディア - microCMS / Next.js(ISR) /

    linaria / aspida それぞれの概要と実装方法 - リリースしてみての所感 - 告知 52