Introducing Now and Next.js

now と next.js の紹介

Transcript

1. Introducing Now and Next.js ౦ژNodeֶԂࡇ2016 @nkzawa
2. ࣗݾ঺հ
3. @nkzawa Zeit, Inc ॴଐ next.js ϝϯςφ socket.io ϝϯςφ
4. Zeit ?
6. now micro hyper (چhyperterm) next.js
7. now micro hyper (چhyperterm) next.js
8. Next.js
9. ϢχόʔαϧͳReactΞϓϦͷͨΊͷখ͞ͳϑϨʔϜϫʔΫ
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. ΠϛϡʔλϒϧͳσϓϩΠαʔϏε
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ΤίγεςϜʹߩݙ͍͖ͯ͠·͢