SHOEISHA iD

パスワードを忘れた場合はこちら

※旧SEメンバーシップ会員の方は、同じ登録情報（メールアドレス＆パスワード）でログインいただけます

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

講座

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

大西 武

中島 佑馬

水無瀬 あずさ

加山 恵美

四七 秀貴
イベント
イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

講演資料・動画まとめページ

Developers CAREER Boost 2024 講演資料まとめ

Developers X Summit 2024 講演資料まとめ

Developers Summit 2024 KANSAI 講演関連資料まとめ

Developers Summit 2024 Summer 講演資料まとめ

Developers Boost 2024 講演資料まとめ

Developers Summit 2024 講演資料まとめ

CodeZine BOOKS（コードジン・ブックス）は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
Vercel＋Next.jsを活用したWebアプリケーション開発入門

手軽に高速にWebサイトを公開！ Webホスティングサービス「Vercel」の概要と使い方

Vercel＋Next.jsを活用したWebアプリケーション開発入門　第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

　皆さんがBlogやランディングページなどのWebサイトをいち早くインターネットにサイトを公開したいとき、どんなプラットフォームを活用しようと思い浮かべるでしょうか？ Amazon S3などのクラウドサービスでしょうか？ それともGitHub PagesやNetlifyなどのホスティングサービスでしょうか？ この連載では、現在注目のWebホスティングサービス「Vercel」をご紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

前提環境

　筆者の環境は次の通りです。

  • Windows 10
  • Visual Studio Code
  • Next.js
  • Vercelアカウント
  • GitHubアカウント

Vercelとは

　VercelはCI/CDとWebサーバーが合わさったサービスです。無料で始めることができ、GitHubなどのリポジトリと連携することで手軽にアプリケーションをデプロイすることが可能です。また、CDNが含まれているため高速なページ表示が可能となっています。

　Vercelが目指していることは、最高の開発者エクスペリエンスとエンドユーザーのパフォーマンスへのこだわりです。チーム開発もサポートしており、開発チームにすぐに組み込むことが可能です。

　現在では電子商取引、旅行、ニュース、マーケティングといったさまざまな用途に使われており、代表的なサイトはPatreonがあります。

Vercelが持つ3つの特長

　Vercelでは他のサービスと比べて3つの特長があります。

1. Fast Refresh

　ライブエディットに対応しています。コードで変更した箇所が即座にブラウザ上で確認できます。

2. Flexible Data Fetching

　作成したページを任意のデータソース、ヘッドレスCMS、APIに接続し、開発環境で動作させることができます。

3. Edge on Localhost

　キャッシュからサーバーレスファンクションまで、すべてローカルホストで完全に動作します。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Vercelが対応するフレームワーク

NEXT

この記事は参考になりましたか？

  • X ポスト
  • このエントリーをはてなブックマークに追加
Vercel＋Next.jsを活用したWebアプリケーション開発入門連載記事一覧

もっと読む

この記事の著者

山本 誠樹（サイトコア株式会社）（ヤマモト マサキ）

　サイトコア株式会社 セールスグループ パートナーテクニカルイネーブルメントマネージャー。通信系システムや会員管理サービスの設計・開発から保守まで、システムエンジニアとして様々なプロジェクトに約20年従事。近年はクラウドにフォーカスしたコンサルティングを小売・流通・電力系など業種を問わず行う。201...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事

この記事は参考になりましたか？

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine（コードジン）
https://codezine.jp/article/detail/15780 2022/05/24 11:00
" ); }

おすすめ

アクセスランキング

  1. 1
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  2. 2
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  3. 3
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  4. 4
    Google、社内AIエージェント「Google Agentspace」発表
  5. 5
    技術力だけでは乗り越えられないビジネスの壁を乗り越える！推し技術を組織に根付かせる「戦略的エンジニアリング」
  1. 6
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  2. 7
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  3. 8
    Linuxディストリビューション「Serpent OS」、アルファ版がリリース
  4. 9
    AWS、ノーコードで生成AIアプリを作れる「PartyRock」の新機能を紹介、2025年以降は無料で誰でも利用できるように
  5. 10
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」

アクセスランキング

  1. 1
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  2. 2
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  3. 3
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  4. 4
    Google、社内AIエージェント「Google Agentspace」発表
  5. 5
    技術力だけでは乗り越えられないビジネスの壁を乗り越える！推し技術を組織に根付かせる「戦略的エンジニアリング」
  6. 6
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  7. 7
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  8. 8
    Linuxディストリビューション「Serpent OS」、アルファ版がリリース
  9. 9
    AWS、ノーコードで生成AIアプリを作れる「PartyRock」の新機能を紹介、2025年以降は無料で誰でも利用できるように
  10. 10
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」　～マンガでプログラミング用語解説
  3. 3
    ITエンジニア本大賞2025、投票締切直前！ みんなで選んだ歴代の大賞本を振り返って一挙紹介
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  6. 6
    Google、社内AIエージェント「Google Agentspace」発表
  7. 7
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  8. 8
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  9. 9
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  10. 10
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

メールバックナンバー

アクセスランキング

  1. 1
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  2. 2
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  3. 3
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  4. 4
    Google、社内AIエージェント「Google Agentspace」発表
  5. 5
    技術力だけでは乗り越えられないビジネスの壁を乗り越える！推し技術を組織に根付かせる「戦略的エンジニアリング」
  1. 6
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  2. 7
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  3. 8
    Linuxディストリビューション「Serpent OS」、アルファ版がリリース
  4. 9
    AWS、ノーコードで生成AIアプリを作れる「PartyRock」の新機能を紹介、2025年以降は無料で誰でも利用できるように
  5. 10
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」

アクセスランキング

  1. 1
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  2. 2
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  3. 3
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  4. 4
    Google、社内AIエージェント「Google Agentspace」発表
  5. 5
    技術力だけでは乗り越えられないビジネスの壁を乗り越える！推し技術を組織に根付かせる「戦略的エンジニアリング」
  6. 6
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  7. 7
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  8. 8
    Linuxディストリビューション「Serpent OS」、アルファ版がリリース
  9. 9
    AWS、ノーコードで生成AIアプリを作れる「PartyRock」の新機能を紹介、2025年以降は無料で誰でも利用できるように
  10. 10
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」　～マンガでプログラミング用語解説
  3. 3
    ITエンジニア本大賞2025、投票締切直前！ みんなで選んだ歴代の大賞本を振り返って一挙紹介
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  6. 6
    Google、社内AIエージェント「Google Agentspace」発表
  7. 7
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  8. 8
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  9. 9
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  10. 10
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース