×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Slide 1
Slide 1 text
next.jsを使ったuniversal React入門
Slide 2
Slide 2 text
自己紹介
Slide 3
Slide 3 text
自己紹介 @steelydylan React, TypeScript が大好きなフロントエンドエンジニア
Slide 4
Slide 4 text
目次 Universal JavaScriptとは Reactを使う場合 next.jsがオススメの理由 next.js 説明 next.js高度な使い方 netlifyとは netlifyとの連携 lambda functionとは netlifyの lambda function の利用
Slide 5
Slide 5 text
Universal JavaScriptとは フロントエンド、サーバーサイドに左右されず一貫して動くJavaScript のこと
Slide 6
Slide 6 text
Reactの場合 Express.js next.js
Slide 7
Slide 7 text
Next.jsがおすすめ 理由 TypeScriptを使いやすい フロントエンドとサーバーサイドで処理をわけやすい
Slide 8
Slide 8 text
next.jsがおすすめ $ npm install --save next react react-dom
Slide 9
Slide 9 text
next.jsがおすすめ { "scripts": { "dev": "next", "build": "next build", "start": "next start" } }
Slide 10
Slide 10 text
next.jsがおすすめ ./pages/index.js を作成し、 export default () =>
Welcome to next.js!
Slide 11
Slide 11 text
next.jsがおすすめ これだけ！
Slide 12
Slide 12 text
next.js高度な設定 TypeScriptを利用 styled‑componentをSSRする
Slide 13
Slide 13 text
TypeScriptを利用 Babelのpresetを下記のように記述 .babelrc "presets": [ "next/babel", "@zeit/next-typescript/babel" ], next.config.js const withTypescript = require('@zeit/next-typescript') const withCSS = require('@zeit/next-css') module.exports = withTypescript(withCSS());
Slide 14
Slide 14 text
styled‑componentをSSR .babelrc "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ]
Slide 15
Slide 15 text
netlifyとは 静的サイトを簡単に公開することができるサイト gitとの連携が容易で、pushされた時のビルドコマンドを指定することが できる！ npm run build など
Slide 16
Slide 16 text
netlifyとの連携 package.json "scripts": { "build": "next build && npm run lambda" }
Slide 17
Slide 17 text
lambda function とは サーバーを必要とせず、必要時にのみ関数を実行できるもの Node.jsなどの言語にも対応している。
Slide 18
Slide 18 text
netlifyの lambda function の利用 npm install netlify-lambda --save-dev
Slide 19
Slide 19 text
netlifyの lambda function の利用 package.json "scripts": { "lambda": "netlify-lambda build functions", "lambda-local": "netlify-lambda serve functions", }
Slide 20
Slide 20 text
netlifyの lambda function の利用 netlify.tomlの作成 [build] command = "npm run export" publish = "out" functions = "lambda"
Slide 21
Slide 21 text
netlifyの lambda function の利用 記述例 exports.handler = async (event, context, callback) => { return callback(null, { statusCode: 200, headers: { 'Content-type': 'application/json' }, body: JSON.stringify({ test: 'hoge' }) }); };
Slide 22
Slide 22 text
netlifyの lambda function の利用 run.jsという名前で作成した場合、下のURLでアクセス可能 https://example.com/.netlify/functions/run
Slide 23
Slide 23 text
実際のgithubレポジトリ https://github.com/steelydylan/next‑starter‑kit