Introducing Now and Next.js

now と next.js の紹介

Transcript

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

   View Slide

2. ࣗݾ঺հ
   

   View Slide

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

   View Slide

4. Zeit ?
   

   View Slide

5. View Slide

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

   View Slide

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

   View Slide

8. Next.js
   

   View Slide

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

   View Slide

10. View Slide

11. Get started
    1. next.js ΛΠϯετʔϧ
    2. next ίϚϯυΛ࣮ߦ
    3. pages σΟϨΫτϦʹ Reactίϯϙω
    ϯτΛฦ͢JSϑΝΠϧΛ࡞੒
    

    View Slide

12. ίϚϯυͰ͍͏ͱ
    $ npm install —save next
    $ node_modules/.bin/next
    $ vi pages/index.js
    

    View Slide

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

    View Slide

14. ϑΝΠϧΛURLʹϚοϐϯά
    pages/index.js -> /
    pages/about.js -> /about
    pages/foo/bar.js -> /foo/bar
    

    View Slide

15. ࣗಈͰ͜ΕΒ͕ߦΘΕΔ
    • αʔόϨϯμϦϯά
    • ίʔυ෼ׂ + ஗Ԇಡࠐ
    • ࠷৽ίʔυࣗಈ࠶ಡࠐ(hot-code reloading)
    • babelʹΑΔτϥϯεύΠϧ
    • webpackʹΑΔ݁߹
    

    View Slide

16. ઃఆͷඞཁͳ͠
    ͔ͭ
    ։ൃ଎౓ɺύϑΥʔϚϯεΛ࠷దԽ
    

    View Slide

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

    View Slide

18. Next.jsͷղܾํ๏
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. ͦͷଞͷػೳ
    

    View Slide

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

    View Slide

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 () => hi!
    

    View Slide

25. Link ίϯϙʔωϯτ
    pushState Λ࢖ͬͨϖʔδભҠ
    

    View Slide

26. import React from 'react'
    import Link from 'next/link'
    export default () => (
    ͜͜ΛΫϦοΫ
    )
    

    View Slide

27. Head ίϯϙʔωϯτ
    headλάͷࢠཁૉΛߋ৽
    

    View Slide

28. import React from 'react'
    import Head from 'next/head'
    export default () => (
    
    
    λΠτϧ
    
    
    hi
    
    )
    

    View Slide

29. getInitialProps
    τοϓϨϕϧίϯϙωϯτͷ props Λฦ͢staticϝιουΛఆٛ
    

    View Slide

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 hi, {this.props.user.name}!
    }
    }
    

    View Slide

31. ٞ࿦தͷIssue
    - Θ͔Γ΍͍͢URLͷ࣮ݱ /users/123
    - babel, webpack ͷΧελϚΠζ
    ৄ͘͠͸:
    https://github.com/zeit/next.js#future-directions
    

    View Slide

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

    View Slide

33. now
    

    View Slide

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

    View Slide

35. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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!’)
    })
    

    View Slide

40. ඞཁͳͷ͸ npm start ͷఆٛͷΈ
    ͲͷϙʔτΛlistenͯ͠΋Α͍
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. ଞʹ΋
    • Now.app: σεΫτοϓɾΫϥΠΞϯτ
    • zeit.world: Free DNS αʔϏε
    • now secret: γʔΫϨοτͷ؅ཧ
    

    View Slide

51. ϚΠΫϩαʔϏε
    micro ϥΠϒϥϦΛ࢖ͬͨϢʔεέʔε
    https://github.com/zeit/micro
    

    View Slide

52. microΛ࢖ͬͨαʔό࣮૷
    const { json } = require(‘micro’)
    module.exports = async (req, res) => {
    // ϦΫΤετϘσΟͷऔಘ
    const body = await json(req)
    console.log(body.data)
    // Ϩεϙϯε
    return { message: ‘ok’ }
    }
    

    View Slide

53. package.json
    {
    “name”: “foo”,
    “scripts”: {
    “start”: “micro”
    },
    “dependencies”: {
    “micro”: “*”
    }
    }
    

    View Slide

54. σϓϩΠ & ΤΠϦΞεઃఆ
    $ now
    $ now alias foo-uiafeuzauf.now.sh foo.now.sh
    

    View Slide

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

    View Slide

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
    …
    

    View Slide

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

    View Slide

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

    View Slide