Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Introducing Now and Next.js
Naoyuki Kanezawa
November 13, 2016
Programming
12
4.5k
Introducing Now and Next.js
now と next.js の紹介
Naoyuki Kanezawa
November 13, 2016
Tweet
Share
More Decks by Naoyuki Kanezawa
See All by Naoyuki Kanezawa
nkzawa
4
6.7k
nkzawa
5
1.3k
nkzawa
21
8.3k
Other Decks in Programming
See All in Programming
grapecity_dev
0
180
madai0517
1
200
maito1201
0
160
minamijoyo
3
510
ryosukes
0
1.4k
yoshinoriiiii
0
110
korosuke613
2
260
raulh82vlc
1
260
bkuhlmann
2
310
rarous
0
170
antonshilov
1
130
takahi5
3
120
Featured
See All Featured
notwaldorf
16
1.8k
myddelton
109
11k
cassininazir
347
20k
philhawksworth
192
8.8k
thoeni
3
610
holman
288
130k
shpigford
369
42k
bkeepers
321
53k
smashingmag
283
47k
colly
188
14k
smashingmag
230
18k
addyosmani
311
21k
Transcript
Introducing Now and Next.js ౦ژNodeֶԂࡇ2016 @nkzawa
ࣗݾհ
@nkzawa Zeit, Inc ॴଐ next.js ϝϯςφ socket.io ϝϯςφ
Zeit ?
None
now micro hyper (چhyperterm) next.js
now micro hyper (چhyperterm) next.js
Next.js
ϢχόʔαϧͳReactΞϓϦͷͨΊͷখ͞ͳϑϨʔϜϫʔΫ
None
Get started 1. next.js ΛΠϯετʔϧ 2. next ίϚϯυΛ࣮ߦ 3. pages
σΟϨΫτϦʹ Reactίϯϙω ϯτΛฦ͢JSϑΝΠϧΛ࡞
ίϚϯυͰ͍͏ͱ $ npm install —save next $ node_modules/.bin/next $ vi
pages/index.js
pages/index.js import React from ‘react’ export default () => (
<div>Hello, world!</div> )
ϑΝΠϧΛURLʹϚοϐϯά pages/index.js -> / pages/about.js -> /about pages/foo/bar.js -> /foo/bar
ࣗಈͰ͜ΕΒ͕ߦΘΕΔ • αʔόϨϯμϦϯά • ίʔυׂ + Ԇಡࠐ • ࠷৽ίʔυࣗಈ࠶ಡࠐ(hot-code reloading)
• babelʹΑΔτϥϯεύΠϧ • webpackʹΑΔ݁߹
ઃఆͷඞཁͳ͠ ͔ͭ ։ൃɺύϑΥʔϚϯεΛ࠷దԽ
SPAͰΑ͋͘Δ • ॳظද͕͍ࣔ • ϖʔδ͕૿͑Δͱॏ͘ͳΔ
Next.jsͷղܾํ๏
αʔόϨϯμϦϯά ॳظදࣔύϑΥʔϚϯε্ɺSEO JSϑΝΠϧΛஔ͚ͩ͘
ϦονͳWebΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415 “αʔόʔ͕ϖʔδΛϨϯμϦϯά͢ΔͷҙͰͳ͍ɻ” “tl;DR: αʔόʔϨϯμϦϯάSEO͚ͩͷͷ͡Όͳ͘ɺੑೳΛ্ͤ͞ΔͨΊͷͷ Ͱ͢ɻʢޙུʣ”
ίʔυׂ + Ԇಡࠐ ϖʔδຖʹ݁߹ϑΝΠϧΛ࡞͠ɺॳظදࣔ࣌ʹෆඞཁͳϞδϡʔϧಡΈࠐ·ͳ͍ɻ ભҠ͕ൃੜͨ͠ॠؒʹॳΊͯɺ࣍ͷίϯϙʔωϯτΛऔಘ͠දࣔ͢Δɻ ϖʔδಡΈࠐΉϞδϡʔϧ͕૿͑ͯɺଞͷϖʔδʹӨڹ͠ͳ͍ɻ
ͦͷଞͷػೳ
CSS glamor ϥΠϒϥϦΛͬͨελΠϧఆٛ - CSS-in-JS: JSͷදݱྗΛϑϧ׆༻ - ίϯϙωϯτຖʹಠཱ: ύϑΥʔϚϯεతʹଞϖʔδӨڹͳ͠ -
vendor prefix ࣗಈ༩ͷαϙʔτ
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>
Link ίϯϙʔωϯτ pushState ΛͬͨϖʔδભҠ
import React from 'react' import Link from 'next/link' export default
() => ( <div><Link href=“/about”>͜͜</Link>ΛΫϦοΫ</div> )
Head ίϯϙʔωϯτ headλάͷࢠཁૉΛߋ৽
import React from 'react' import Head from 'next/head' export default
() => ( <div> <Head> <title>λΠτϧ</title> <meta charSet="utf-8" /> </Head> <p>hi</p> </div> )
getInitialProps τοϓϨϕϧίϯϙωϯτͷ props Λฦ͢staticϝιουΛఆٛ
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> } }
ٞதͷIssue - Θ͔Γ͍͢URLͷ࣮ݱ /users/123 - babel, webpack ͷΧελϚΠζ ৄ͘͠: https://github.com/zeit/next.js#future-directions
Ұ୴·ͱΊ ReactΛ͍ͬͯΕ͙͢ʹ͑Δ Next.jsϑϩϯτΤϯυ։ൃΛָʹ͠·͢!
now
ΠϛϡʔλϒϧͳσϓϩΠαʔϏε
None
Get started 1. now ΛΠϯετʔϧ 2. now ίϚϯυΛ࣮ߦ͢Δ 3. ॳճͷΈϝʔϧʹΑΔϩάΠϯೝূ
ίϚϯυͰ͍͏ͱ $ npm install -g now $ now
package.json { “name”: “app” “scripts”: { “start”: “node server.js” }
}
ϙʔτΛҰͭͪड͚Δ const http = require(‘http’) http.createServer((req, res) => { res.writeHead(200,
{ 'Content-Type': ‘text/plain' }) res.end(‘Hello, world’) }).listen(3000, () => { console.log(‘Ready!’) })
ඞཁͳͷ npm start ͷఆٛͷΈ ͲͷϙʔτΛlistenͯ͠Α͍
શͯͷΞϓϦɺ͜ͷΑ͏ʹಈ࡞͢Δ • ৗʹHTTPS • ඪ४ͰHTTP/2αϙʔτ • Φʔτεέʔϧ • Πϛϡʔλϒϧ
ΠϛϡʔλϒϧɾσϓϩΠ σϓϩΠ͢Δຖʹ৽͍͠URL͕࡞͞ΕΔɻ ྫ͑: my-app-erkgfjtrna.now.sh ݹ͍URLআ͠ͳͯ͘Α͍ɻӬٱʹଘࡏ͠ଓ͚Δɻ
ຊ൪ެ։͢Δ࣌ʹɺΘ͔Γ͍͢ΤΠϦΞεɾυϝΠϯΛઃఆ $ now alias my-app-erkgfjtrna.now.sh my-app.now.sh
• URL͕ৗʹಉ͡ΞϓϦͷঢ়ଶΛද͢ • ߋ৽ϩʔϧόοΫ͕Ұॠ • εςʔδϯάڥ͕ඞཁͳ͘ͳΔ ͳͲͷར
Φʔτεέʔϧ τϥϑΟοΫϦιʔεͷมԽʹԠͯ͡ɺΠϯελϯεΛ૿ݮ τϥϑΟοΫΛෛՙࢄ
θϩͷεέʔϧ ͠Β͘τϥϑΟοΫ͕ͳ͍߹ɺΠϯελϯε͕θϩʹͳΔ ࠶ͼΞΫηε͕͋Εɺ৽ͨʹΠϯελϯε্ཱ͕͕ͪΔ
σʔλͷӬଓԽ Πϯελϯε͕ࣗಈͰੜɺഁغ͞ΕΔͨΊ෦ʹσʔλΛͤͳ͍ ΘΓʹ compose.com ͳͲͷΫϥυɾετϨʔδαʔϏεΛ͏
Dockerfile αϙʔτ package.json ͷΘΓʹ Dockerfile Λ༻ҙͯ͠ɺ $ now ͲΜͳݴޠͰॻ͔ΕͨΞϓϦσϓϩΠՄೳ
੩తαΠταϙʔτ htmlϑΝΠϧը૾ͳͲͷΞηοτΛ༻ҙͯ͠ɺ $ now ࣗಈͰ੩తαΠτ͔Ͳ͏͔ผ͞ΕΔ
ଞʹ • Now.app: σεΫτοϓɾΫϥΠΞϯτ • zeit.world: Free DNS αʔϏε •
now secret: γʔΫϨοτͷཧ
ϚΠΫϩαʔϏε micro ϥΠϒϥϦΛͬͨϢʔεέʔε https://github.com/zeit/micro
microΛͬͨαʔό࣮ const { json } = require(‘micro’) module.exports = async
(req, res) => { // ϦΫΤετϘσΟͷऔಘ const body = await json(req) console.log(body.data) // Ϩεϙϯε return { message: ‘ok’ } }
package.json { “name”: “foo”, “scripts”: { “start”: “micro” }, “dependencies”:
{ “micro”: “*” } }
σϓϩΠ & ΤΠϦΞεઃఆ $ now $ now alias foo-uiafeuzauf.now.sh foo.now.sh
ϚΠΫϩαʔϏε܈Λ࡞ foo.now.sh bar.now.sh baz.now.sh …
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 …
Serverless ʹ͍ۙੑ࣭ (αʔόཧෆཁɺΦʔτεέʔϧɺؔɺ୯Ұͷؔ৺ࣄ) ʴ just HTTP (no ϩοΫΠϯ)
·ͱΊ now σϓϩΠΛγϯϓϧ͢Δ ˚ Zeit Node.JSΤίγεςϜʹߩݙ͍͖ͯ͠·͢