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
200
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
9
1.9k
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
steelydylan
1
2.3k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
1.1k
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
910
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
360
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
460
アップルップルの新しいオープンソースの紹介
steelydylan
0
500
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
570
Other Decks in Programming
See All in Programming
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
140
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
230
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
960
TypeScript LSP の今までとこれから
quramy
0
110
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
複数アプリケーションを育てていくための共通化戦略
irof
2
700
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
1
310
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
280
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
インターフェース設計のコツとツボ
togishima
2
490
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Building Adaptive Systems
keathley
41
2.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
KATA
mclloyd
29
14k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Raft: Consensus for Rubyists
vanstee
137
7k
How to Ace a Technical Interview
jacobian
276
23k
Music & Morning Musume
bryan
47
6.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
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