Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
next.jsを使ったuniversal React 入門
Search
Hori Godai
December 14, 2018
Programming
1
310
next.jsを使ったuniversal React 入門
Hori Godai
December 14, 2018
Tweet
Share
More Decks by Hori Godai
See All by Hori Godai
TypeScript Compiler APIを使って 型のユニットテストをブラウザーで動かす
steelydylan
3
240
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
9
1.9k
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
steelydylan
1
2.4k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
1.2k
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
930
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
390
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
490
アップルップルの新しいオープンソースの紹介
steelydylan
0
510
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
590
Other Decks in Programming
See All in Programming
CSC509 Lecture 04
javiergs
PRO
0
300
All About Angular's New Signal Forms
manfredsteyer
PRO
0
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
370
Introduce Hono CLI
yusukebe
3
1.5k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
230
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
250
Devoxx BE - Local Development in the AI Era
kdubois
0
130
品質ワークショップをやってみた
nealle
0
290
What's new in Spring Modulith?
olivergierke
1
150
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
The Invisible Side of Design
smashingmag
302
51k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Bash Introduction
62gerente
615
210k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Producing Creativity
orderedlist
PRO
347
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
KATA
mclloyd
32
15k
Statistics for Hackers
jakevdp
799
220k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Transcript
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 () => <div>Welcome to next.js!</div>
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