next.jsを使ったuniversal React 入門

Transcript

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