プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • Next.js
  • 【Next.js】基本、バージョン、導入方法、Vercelとは?
 
 
     
  • サーバー言語  
    • Python
    • Ruby
    • PHP
    • SQL
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
  •  
  • 設計  
       
    • 実装設計
    • DB設計
  • 問い合わせ
  

【Next.js】基本、バージョン、導入方法、Vercelとは?

05.08

  • miyabisan2
  • コメントを書く

この記事は3分で読めます

Next.jsとは?

Reactのフレームワーク

SSG(Static Site Generation)

日本語で言えば「静的サイトジェネレーション」の略です。事前にHTMLを生成することでSEO対策になったり、高速でサイトを表示させれるようになったりします。特にSEO対策が要求されるサイトに向いています。

従来の「Create-react-app」などの仕組みになっている「クライアントサイドレンダリング」だとサーバーの負荷も増えてしまいますが、Next.jsの場合はこの方法だとAPIリクエストを捌く必要がなく事前にHTMLにデータを埋め込んで配信を行うのでサーバー負荷も低減できます。

なぜ従来のReactだとサーバーの負荷が増えるのか?

通常のReactだと、ユーザーが画面にアクセスしてからAxiosなどでAPIリクエストを行いデータを取得して情報を画面に埋め込んでいます。ユーザーの数が多ければ多いほど同じようにAPIアクセスを捌くことになります。

初期表示時のアクセスであれば、ユーザーごとに全く同じコンテンツを返すのにこれでは無駄にサーバーの負荷が増えることになってしまいます。

クライアントサイドレンダリングとは?

例えば、create-react-appで作ったサイトをJavaScriptを無効化した場合は何も表示されませんが、Next.jsの場合は静的なHTMLをサーバー側で作ってくれるのでサイト自体は表示されます。

フォルダ構造とファイル名に基づくPage Navigation

ReactのReact Router DOMを使うことなくページ遷移を行わせることが可能です。

ディプロイが簡単

Vercel社が開発していて、開発からデプロイまでをシームレスに行うことが可能です。

ISR(Incremental Static Regeneration)

従来のSSGではなかった技術(静的コンテンツを動的に更新はできなかった。)。しかし、ISRのおかげでユーザーアクセスを起点として動的に静的コンテンツを更新してくれます。

SSG + ISR + CSR(Client Side Rendering、useSWR)の融合

SEO対応かつリアルタイムにデータを取得してレンダリングさせることが可能になります。

導入事例

  • NETFLIX
  • NIKE
  • Hulu
  • SEO対策が要求される企業のランディングページ、HP、ブログなど

これらのサイトに共通しているポイントとしては「誰が見ても同じコンテンツ」と言うことです。例えば、NETFLIXの動画一覧やNIKEの商品一覧は誰がアクセスしたとしても同じコンテンツが表示されます。

Next.jsプロジェクトのインストール

1
npx create-next-app . --use-npm

コマンド

npm run dev

ローカルサーバーを起動する。以下のURLでアクセスすることができます。

1
http://localhost:3000/

npm run build

プロジェクトをビルドすることができる。

npm start

プロダクション環境のサーバーをローカルで起動することができる。

バージョン

バージョンリリース日説明
12016/10/25
22017年3月
3
4
5
6
72018年9月・webpack4に対応した。
82019/2/11・targetオプションを導入した。
92019/7/8
9.32020/3/25・このバージョン以降はNext.jsはSSR専用ではなく、SSGの機能が導入された。

・SSG用のAPIである「getStaticProps」と「getStaticPaths」とSSR用のAPIである「getServerSideProps」という新APIが登場した。(それまで使われていたSSR用APIである「getInitialProps」が非推奨になった。)

9.52020/7/27・ISRが登場した。(β版としては9.4から登場していた。)
102020/10/27・React17をサポートした。
112021/6/16・webpack5がデフォルトで4を削除した。

・「Create React App」からの移行機能が導入された。

・ビルド時に「distDir(.nextフォルダ)」が自動でクリーンされるようになった。

122021/10/27・過去最大のリリースらしい。

・React18に対応した。

132022/11React Server Component登場(React18の機能)
App Router登場(まだこの時点ではbeta版)
13.42023/4App Routerがstable版になった。(beta版で存在していたhead.tsxが廃止になった。)

Vercelとは?

Next.jsを開発しているVercel Inc.という会社が提供しているホスティングサービスです。作成したWebアプリを数十秒でデプロイしてグローバル展開できます。

料金プラン

いくつかあるが、個人で非営利で使用する場合は無料で利用することが可能。Webサービスを展開する上での強力なツールになる。

チームアカウント

会社で本番運用する場合はこれを使います。

パーソナルアカウント

少し試すだけならこれで十分

デプロイ方法

GitHub、GitLab、Bitbucketなどのリポジトリと連携する必要がある。GitHubにpushしたら自動でVercelにデプロイしてくれる設定をすることが可能です。

環境変数設定

「Settings→Environment Variables」でできる。

スポンサーリンク
  • 2021 05.08
  • miyabisan2
  • コメントを書く
  • Next.js
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2022 01.17

    【Next.js】ディレクトリ構成、「.next」ディレクトリ、「_app.tsx」と「_document.tsx」、APIルート機能など

  2. 2023 09.01

    【Next.js】App Routerについて

  3. 2021 05.08

    【Next.js】「ISR(Incremental Static Regeneration)」について

  4. 2022 01.16

    【Next.js】各種コマンドについて

  5. 2022 05.12

    【React、Next.js】「環境変数」の組み込み方について

  6. 2021 05.16

    【Next.js】Next.jsの基本コンポーネント、ページ遷移、ページのテスト

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【Next.js】「ISR(Incremental S…

【Next.js】「getStaticProps」、「…

RETURN TOP

著者プロフィール

エンジニア歴10年で過去に業務系、Webデザイン、インフラ系なども経験あります。現在はWeb系でフロントエンド開発中心です。

詳細なプロフィールはこちら

スポンサーリンク

カテゴリー

  • Android
  • AngularJS
  • API
  • AWS
  • C++
  • CSS
  • C言語
  • DDD
  • DevOps
  • Django
  • Docker
  • Figma
  • Git
  • GitLab
  • GraphQL
  • Hasura
  • Java
  • JavaScript
  • Kubernetes
  • Laravel
  • linux
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • Oracle
  • PHP
  • Python
  • React
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Sass
  • Spring Framework
  • SQL
  • TypeScript
  • Unity
  • Vue.js
  • Webサービス開発
  • Webデザイン
  • Web技術
  • インフラ
  • オブジェクト指向
  • システム開発
  • セキュリティ
  • その他
  • データベース
  • デザインパターン
  • テスト
  • ネットワーク
  • プログラミング全般
  • マイクロサービス
  • マイクロソフト系技術
  • マルチメディア
  • リファクタリング
  • 副業
  • 未分類
  • 業務知識
  • 生成AI
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | プライバシーポリシー