$30 off During Our Annual Pro Sale. View Details »

僕が求めていたのはNext.jsだったんだ

 僕が求めていたのはNext.jsだったんだ

Next.jsは素晴らしいという話。React LT会 @Informetis (2019-04-24) で発表。

Matsuo Obu

April 24, 2019
Tweet

More Decks by Matsuo Obu

Other Decks in Technology

Transcript

  1. @mqtsuo02 2019-04-24 React LT会 僕が求めていたのは Next.js だったんだ

  2. 自己紹介 + React歴 - フリーランスのWebエンジニア - 直近2年間はずっとReact関連 - ReactのSPA3本、ReactNative1本 -

    色んな構成でやった - redux, redux-saga, ContextAPI - Flow, TypeScript - styled-components, CSS Modules, inline style - create-react-app, storybook, jest, enzyme - Vue.js (Nuxt.js)とかGolangもやってます
  3. ユーザ投稿型のメディアを作りたくなった。 (仕組みとしてはnote.muみたいなもの) 最近のはなし

  4. Firebase HostingにReactのSPAおけばいいかな... と思いつつも 将来のことが色々不安になってきた。 最近のはなし

  5. SEO的なものは大丈夫なんだろうか? GoogleはSPAでもクロールするって言ってるけど OGPとかは大丈夫なんだろうか? react-helmetで実装してるけど、読んでくれるのかな? 将来の不安 その1

  6. First Viewのパフォーマンス大丈夫かな? メディアだから待たせたくない! PHPとかRubyのSSRに負けてしまうんじゃないだろうか 負けたくねぇよぉ... 将来の不安 その2

  7. Laravel 勉強したほうがいいんじゃね? GAE/Golangでサーバ立ててテンプレートでなんとかする? 最近JAMStack流行ってきてるのかな? SPAに限界感じる。もう何もかも嫌だ。 結果、開発放置気味に... 不安が生んだ迷いと現実逃避

  8. 3ヶ月後

  9. Next.jsの母 (ZEIT) 来日

  10. 最新のNext.jsはAMPにも対応できる Serverless pre renderingでめちゃ速い 差分だけビルドできる 湧き上がる会場 Next.jsそんなにええんか!? ZEITのLT

  11. First ViewはSSRで、その後はSPAで ユニバーサルなJavaScript モジュールを分割して段階的に読み込める とにかく速さを売りにしていることがワカッタ! Next.js 再入門してみた

  12. Express + Next.js + React これがユニバーサルJavaScriptか!! めっちゃいいやん!! Next.js の SSR+SPAチュートリアルやってみた

    server.js require(“express”); require(“next”); ... pages/index.js Index.getInitialProps = async () => { … return {key: value}; }; package.json “build”: “next build”, “start”: “node server.js”, ... next build して server.js実行する感じ nextを初期化して express書いていく感じ いつもの要領でJSX書く getInitialPropsでデータ取得
  13. SPAとSSR組み合わせるの辛いって誰か言ってた ReactでSSRするのって本質的じゃなくない? 投資対効果低そう.... Before

  14. Next.js 最高!!! ZEIT 神!! 一生ついていきます!! After

  15. Front End (GAE) node10 Express + Next.jsで SSR + SPA

    ぼくが考えた さいつよ の構成 ユーザ認証 (Firebase Auth) Back End (Cloud Functions or GAE) Golang or node DB (Cloud DataStore) Storage (Cloud Storage) SSR + SPA、オートスケーリング、たぶん完璧!!
  16. ReactやってるならNext.jsもやった方がいい 公式ページみると感動するよ Next.js 最高!!! ZEIT 神!!! あと、Reactのお仕事ください! このLTで伝えたかったこと

  17. E N D