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
250
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
110
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
9
1.7k
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
steelydylan
1
1.9k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
900
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
800
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
250
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
400
アップルップルの新しいオープンソースの紹介
steelydylan
0
450
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
500
Other Decks in Programming
See All in Programming
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
Core_Audio徹底解剖.pdf
entaku
3
100
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
710
Swift Concurrencyとレースコンディション
objectiveaudio
1
400
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
610
Rubyのobject_id
qnighy
6
1.3k
What we keep in mind when migrating from Serverless Framework to AWS CDK and AWS SAM
kasacchiful
1
130
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
120
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
130
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
910
LR で JSON パーサーを作る / Coding LR JSON Parser
junk0612
2
180
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
360
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
22
1.7k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Design by the Numbers
sachag
277
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Bash Introduction
62gerente
608
210k
5 minutes of I Can Smell Your CMS
philhawksworth
201
19k
Designing for Performance
lara
604
68k
GraphQLとの向き合い方2022年版
quramy
43
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
The Cult of Friendly URLs
andyhume
76
5.9k
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