Introducing Now and Next.js

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

ࣗݾ঺հ

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

Zeit ?

now micro hyper (چhyperterm) next.js

Next.js

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

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 preﬁx ࣗಈ෇༩౳ͷαϙʔτ

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͸ϑϩϯτΤϯυ։ൃΛָʹ͠·͢!

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

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 ͳͲͷΫϥ΢υɾετϨʔδαʔϏεΛ࢖͏

Dockerﬁle αϙʔτ package.json ͷ୅ΘΓʹ Dockerﬁle Λ༻ҙͯ͠ɺ $ 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ΤίγεςϜʹߩݙ͍͖ͯ͠·͢

Introducing Now and Next.js

Introducing Now and Next.js

More Decks by Naoyuki Kanezawa

Other Decks in Programming

Featured

Transcript