Next.js + Now + Typescriptで爆速デプロイ

概要

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の概要が出てくるのが悲しいなといつも思う