Introducing Now and Next.js

Introducing Now and Next.js

now と next.js の紹介

6aea7f3a669da60c1a5744d8b22bd6e6?s=128

Naoyuki Kanezawa

November 13, 2016
Tweet

Transcript

  1. Introducing Now and Next.js ౦ژNodeֶԂࡇ2016 @nkzawa

  2. ࣗݾ঺հ

  3. @nkzawa Zeit, Inc ॴଐ next.js ϝϯςφ socket.io ϝϯςφ

  4. Zeit ?

  5. None
  6. now micro hyper (چhyperterm) next.js

  7. now micro hyper (چhyperterm) next.js

  8. Next.js

  9. ϢχόʔαϧͳReactΞϓϦͷͨΊͷখ͞ͳϑϨʔϜϫʔΫ

  10. None
  11. Get started 1. next.js ΛΠϯετʔϧ 2. next ίϚϯυΛ࣮ߦ 3. pages

    σΟϨΫτϦʹ Reactίϯϙω ϯτΛฦ͢JSϑΝΠϧΛ࡞੒
  12. ίϚϯυͰ͍͏ͱ $ npm install —save next $ node_modules/.bin/next $ vi

    pages/index.js
  13. pages/index.js import React from ‘react’ export default () => (

    <div>Hello, world!</div> )
  14. ϑΝΠϧΛURLʹϚοϐϯά pages/index.js -> / pages/about.js -> /about pages/foo/bar.js -> /foo/bar

  15. ࣗಈͰ͜ΕΒ͕ߦΘΕΔ • αʔόϨϯμϦϯά • ίʔυ෼ׂ + ஗Ԇಡࠐ • ࠷৽ίʔυࣗಈ࠶ಡࠐ(hot-code reloading)

    • babelʹΑΔτϥϯεύΠϧ • webpackʹΑΔ݁߹
  16. ઃఆͷඞཁͳ͠ ͔ͭ ։ൃ଎౓ɺύϑΥʔϚϯεΛ࠷దԽ

  17. SPAͰΑ͋͘Δ໰୊ • ॳظද͕ࣔ஗͍ • ϖʔδ͕૿͑Δͱॏ͘ͳΔ

  18. Next.jsͷղܾํ๏

  19. αʔόϨϯμϦϯά ॳظදࣔύϑΥʔϚϯε޲্ɺSEO JSϑΝΠϧΛஔ͚ͩ͘

  20. ϦονͳWebΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415 “αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ” “tl;DR: αʔόʔϨϯμϦϯά͸SEO͚ͩͷ΋ͷ͡Όͳ͘ɺੑೳΛ޲্ͤ͞ΔͨΊͷ΋ͷ Ͱ͢ɻʢޙུʣ”

  21. ίʔυ෼ׂ + ஗Ԇಡࠐ ϖʔδຖʹ݁߹ϑΝΠϧΛ࡞੒͠ɺॳظදࣔ࣌ʹෆඞཁͳϞδϡʔϧ͸ಡΈࠐ·ͳ͍ɻ ભҠ͕ൃੜͨ͠ॠؒʹॳΊͯɺ࣍ͷίϯϙʔωϯτΛऔಘ͠දࣔ͢Δɻ ϖʔδ΍ಡΈࠐΉϞδϡʔϧ͕૿͑ͯ΋ɺଞͷϖʔδʹ͸Өڹ͠ͳ͍ɻ

  22. ͦͷଞͷػೳ

  23. CSS glamor ϥΠϒϥϦΛ࢖ͬͨελΠϧఆٛ - CSS-in-JS: JSͷදݱྗΛϑϧ׆༻ - ίϯϙωϯτຖʹಠཱ: ύϑΥʔϚϯεతʹ΋ଞϖʔδ΁Өڹͳ͠ -

    vendor prefix ࣗಈ෇༩౳ͷαϙʔτ
  24. import React from 'react' import css from 'next/css' const style

    = css({ background: ‘red’, ':hover': { background: 'gray' }, '@media (max-width: 600px)': { background: 'blue' } }) export default () => <p className={style}>hi!</p>
  25. Link ίϯϙʔωϯτ pushState Λ࢖ͬͨϖʔδભҠ

  26. import React from 'react' import Link from 'next/link' export default

    () => ( <div><Link href=“/about”>͜͜</Link>ΛΫϦοΫ</div> )
  27. Head ίϯϙʔωϯτ headλάͷࢠཁૉΛߋ৽

  28. import React from 'react' import Head from 'next/head' export default

    () => ( <div> <Head> <title>λΠτϧ</title> <meta charSet="utf-8" /> </Head> <p>hi</p> </div> )
  29. getInitialProps τοϓϨϕϧίϯϙωϯτͷ props Λฦ͢staticϝιουΛఆٛ

  30. IsomorphicʹσʔλΛऔಘ͢Δྫ import React from ‘react' import 'isomorphic-fetch' export default class

    extends React.Component { static async getInitialProps () { // CORS͕༗ޮͳAPIʹαʔόɺΫϥΠΞϯτ૒ํ͔ΒΞΫηε const res = await fetch(‘http://api.example.com/user/123’) const user = await res.json() return { user } } render () { return <p>hi, {this.props.user.name}!</p> } }
  31. ٞ࿦தͷIssue - Θ͔Γ΍͍͢URLͷ࣮ݱ /users/123 - babel, webpack ͷΧελϚΠζ ৄ͘͠͸: https://github.com/zeit/next.js#future-directions

  32. Ұ୴·ͱΊ ReactΛ஌͍ͬͯΕ͹͙͢ʹ࢖͑Δ Next.js͸ϑϩϯτΤϯυ։ൃΛָʹ͠·͢!

  33. now

  34. ΠϛϡʔλϒϧͳσϓϩΠαʔϏε

  35. None
  36. Get started 1. now ΛΠϯετʔϧ 2. now ίϚϯυΛ࣮ߦ͢Δ 3. ॳճͷΈϝʔϧʹΑΔϩάΠϯೝূ

  37. ίϚϯυͰ͍͏ͱ $ npm install -g now $ now

  38. package.json { “name”: “app” “scripts”: { “start”: “node server.js” }

    }
  39. ϙʔτΛҰͭ଴ͪड͚Δ const http = require(‘http’) http.createServer((req, res) => { res.writeHead(200,

    { 'Content-Type': ‘text/plain' }) res.end(‘Hello, world’) }).listen(3000, () => { console.log(‘Ready!’) })
  40. ඞཁͳͷ͸ npm start ͷఆٛͷΈ ͲͷϙʔτΛlistenͯ͠΋Α͍

  41. શͯͷΞϓϦ͸ɺ͜ͷΑ͏ʹಈ࡞͢Δ • ৗʹHTTPS • ඪ४ͰHTTP/2αϙʔτ • Φʔτεέʔϧ • Πϛϡʔλϒϧ

  42. ΠϛϡʔλϒϧɾσϓϩΠ σϓϩΠ͢Δຖʹ৽͍͠URL͕࡞੒͞ΕΔɻ ྫ͑͹: my-app-erkgfjtrna.now.sh ݹ͍URL͸࡟আ͠ͳͯ͘Α͍ɻӬٱʹଘࡏ͠ଓ͚Δɻ

  43. ຊ൪ެ։͢Δ࣌ʹ͸ɺΘ͔Γ΍͍͢ΤΠϦΞεɾυϝΠϯΛઃఆ $ now alias my-app-erkgfjtrna.now.sh my-app.now.sh

  44. • URL͕ৗʹಉ͡ΞϓϦͷঢ়ଶΛද͢ • ߋ৽΍ϩʔϧόοΫ͕Ұॠ • εςʔδϯά؀ڥ͕ඞཁͳ͘ͳΔ ͳͲͷར఺

  45. Φʔτεέʔϧ τϥϑΟοΫ΍ϦιʔεͷมԽʹԠͯ͡ɺΠϯελϯεΛ૿ݮ τϥϑΟοΫΛෛՙ෼ࢄ

  46. θϩ΁ͷεέʔϧ ͠͹Β͘τϥϑΟοΫ͕ͳ͍৔߹ɺΠϯελϯε͕θϩʹͳΔ ࠶ͼΞΫηε͕͋Ε͹ɺ৽ͨʹΠϯελϯε্ཱ͕͕ͪΔ

  47. σʔλͷӬଓԽ Πϯελϯε͕ࣗಈͰੜ੒ɺഁغ͞ΕΔͨΊ಺෦ʹσʔλΛ࢒ͤͳ͍ ୅ΘΓʹ compose.com ͳͲͷΫϥ΢υɾετϨʔδαʔϏεΛ࢖͏

  48. Dockerfile αϙʔτ package.json ͷ୅ΘΓʹ Dockerfile Λ༻ҙͯ͠ɺ $ now ͲΜͳݴޠͰॻ͔ΕͨΞϓϦ΋σϓϩΠՄೳ

  49. ੩తαΠταϙʔτ htmlϑΝΠϧ΍ը૾ͳͲͷΞηοτΛ༻ҙͯ͠ɺ $ now ࣗಈͰ੩తαΠτ͔Ͳ͏͔൑ผ͞ΕΔ

  50. ଞʹ΋ • Now.app: σεΫτοϓɾΫϥΠΞϯτ • zeit.world: Free DNS αʔϏε •

    now secret: γʔΫϨοτͷ؅ཧ
  51. ϚΠΫϩαʔϏε micro ϥΠϒϥϦΛ࢖ͬͨϢʔεέʔε https://github.com/zeit/micro

  52. microΛ࢖ͬͨαʔό࣮૷ const { json } = require(‘micro’) module.exports = async

    (req, res) => { // ϦΫΤετϘσΟͷऔಘ const body = await json(req) console.log(body.data) // Ϩεϙϯε return { message: ‘ok’ } }
  53. package.json { “name”: “foo”, “scripts”: { “start”: “micro” }, “dependencies”:

    { “micro”: “*” } }
  54. σϓϩΠ & ΤΠϦΞεઃఆ $ now $ now alias foo-uiafeuzauf.now.sh foo.now.sh

  55. ϚΠΫϩαʔϏε܈Λ࡞੒ foo.now.sh bar.now.sh baz.now.sh …

  56. API GatewayͰ·ͱΊΔ api.my-app.com/foo -> foo.now.sh api.my-app.com/bar -> bar.now.sh api.my-app.com/baz ->

    baz.now.sh …
  57. Serverless ʹ͍ۙੑ࣭ (αʔό؅ཧෆཁɺΦʔτεέʔϧɺؔ਺ɺ୯Ұͷؔ৺ࣄ) ʴ just HTTP (no ϩοΫΠϯ)

  58. ·ͱΊ now ͸σϓϩΠΛγϯϓϧ͢Δ ˚ Zeit ͸Node.JSΤίγεςϜʹߩݙ͍͖ͯ͠·͢