next.jsを使ったuniversal React入門

自己紹介

自己紹介 @steelydylan React, TypeScript が大好きなフロントエンドエンジニア

目次 Universal JavaScriptとは Reactを使う場合 next.jsがオススメの理由 next.js 説明 next.js高度な使い方 netlifyとは netlifyとの連携 lambda functionとは netlifyの lambda function の利用

Universal JavaScriptとは フロントエンド、サーバーサイドに左右されず一貫して動くJavaScript のこと

Reactの場合 Express.js next.js

Next.jsがおすすめ 理由 TypeScriptを使いやすい フロントエンドとサーバーサイドで処理をわけやすい

next.jsがおすすめ $ npm install --save next react react-dom

next.jsがおすすめ { "scripts": { "dev": "next", "build": "next build", "start": "next start" } }

next.jsがおすすめ ./pages/index.js を作成し、 export default () =>

next.jsがおすすめ これだけ！

next.js高度な設定 TypeScriptを利用 styled‑componentをSSRする

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());

styled‑componentをSSR .babelrc "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ]

netlifyとは 静的サイトを簡単に公開することができるサイト gitとの連携が容易で、pushされた時のビルドコマンドを指定することが できる！ npm run build など

netlifyとの連携 package.json "scripts": { "build": "next build && npm run lambda" }

lambda function とは サーバーを必要とせず、必要時にのみ関数を実行できるもの Node.jsなどの言語にも対応している。

netlifyの lambda function の利用 npm install netlify-lambda --save-dev

netlifyの lambda function の利用 package.json "scripts": { "lambda": "netlify-lambda build functions", "lambda-local": "netlify-lambda serve functions", }

netlifyの lambda function の利用 netlify.tomlの作成 [build] command = "npm run export" publish = "out" functions = "lambda"

netlifyの lambda function の利用 記述例 exports.handler = async (event, context, callback) => { return callback(null, { statusCode: 200, headers: { 'Content-type': 'application/json' }, body: JSON.stringify({ test: 'hoge' }) }); };

netlifyの lambda function の利用 run.jsという名前で作成した場合、下のURLでアクセス可能 https://example.com/.netlify/functions/run

実際のgithubレポジトリ https://github.com/steelydylan/next‑starter‑kit