概要
Next.js + Now + Typescriptで爆速デプロイ💣
目次
- Next.jsとはなにか
- なにがいいの？
- Nowとはなにか
- なにがいいの？
- 実装
- Next.js + Typescript環境作成
- Nowでデプロイ
Next.jsとはなにか
以下公式ドキュメント翻訳
Server Rendering
Next.jsを使用すると、Reactアプリケーションのサーバーレンダリングが、データの送信元に関係なく、かつてないほど簡単になります。
Static Exporting
新しいフレームワークを学ぶ必要はありません。Next.jsを使用した静的サイトのエクスポートは、1つのコマンドと同じくらい簡単です。
CSS-in-JS
Next.jsには付属してstyled-jsxいますが、ご存知のすべてのCSS-in-JSソリューションでも動作します。
Zero Setup
自動コード分割、ファイルシステムベースのルーティング、ホットコードの再読み込み、ユニバーサルレンダリング。
Fully Extensible
BabelとWebpackを完全に制御します。カスタマイズ可能なサーバー、ルーティング、および次のプラグイン。
Ready for Production
より小さいビルドサイズ、開発のコンパイルの高速化、その他多数の改善のために最適化されています。
Next.jsなにがいいの？
直感的なページベースのルーティングシステム（動的ルートのサポート付き)
pages配下の構成がアプリのURL構成になる
pages/index.js => /
pages/about.js => /about
デフォルトでSSRしてくれる
ReactでSSRしようとすると結構めんどくさいのをデフォルトでやってくれるので楽チン
ページの読み込みを高速化する自動コード分割
コード分割も自動でやってくれる
基本的に何も気にしなくても使うだけで最適化してくれるのが嬉しい。
サンプルが豊富
guthubのexampleを見ればだいたいやりたい構成が載っている。
Nowとはなにか
公式ドキュメントの翻訳
ZEIT Nowは、静的サイトおよびサーバーレス機能向けのクラウドプラットフォームです。これにより、開発者は、即座にデプロイし、自動的にスケーリングし、監視を必要とせず、すべて設定なしで WebサイトとWebサービスをホストできます。
Nowの使用開始はほんの数ステップで、1分もかからずに新しいプロジェクトを開始して実行できます。
なにがいいの？
シンプル且つ高速にデプロイを実現
実装
Next.js + Typescript環境作成
プロジェクト作成
mkdir next-ts
cd next-ts
yarn init -y
yarn add react react-dom next
mkdir pages
次に@typesを追加
yarn add -D typescript @types/react @types/node
次にpackage.jsonにscriptsを追加
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
pages配下にindex.tsxを追加
const Home = () => <h1>Hello world!</h1>;
export default Home;
これで準備完了です。
次のコマンドを実行して、devサーバーを起動します。
yarn dev
http://localhost:3000にアクセスします。
これだけでnext + typescriptの環境は完成です。
Nowでデプロイ
Nowでアカウント作成
Now CLIをインストール
npm i -g now
次のコマンドを使用してログインします。
now login
デプロイ
now
これでデプロイ完了です
Hello world
おまけ
Next.jsでググってるのになぜかNuxt.jsの概要が出てくるのが悲しいなといつも思う
