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
300
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
210
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
9
1.9k
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
steelydylan
1
2.3k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
1.1k
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
920
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
370
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
470
アップルップルの新しいオープンソースの紹介
steelydylan
0
500
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
580
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
140
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.4k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Agile that works and the tools we love
rasmusluckow
329
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Writing Fast Ruby
sferik
628
62k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Optimizing for Happiness
mojombo
379
70k
A Tale of Four Properties
chriscoyier
160
23k
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