基本料金 0円/1ページ 18,000円〜
Next.js制作・コーディング代行
デザインデータから、Next.js（App Router）で構築します。静的書き出しに対応し、レンタルサーバーでも公開できます。
Next.jsとは
Next.js は、React でつくった画面を、そのままWebサイトとして公開できるようにする枠組みです。 Vercel 社が公開しており、いま新しく作られるReactのサイトの多くがこの上に乗っています。
React だけで作ると、最初にブラウザへ返るHTMLがほぼ空になり、中身はブラウザ側で組み立てられます。 Next.js はビルド時やサーバー側でHTMLを組み立てて返せるため、検索エンジンにも中身が読まれ、 最初の表示も速くなります。これが React 単体との一番大きな違いです。
当社は、このサイト（wp-coding.jp）と自社サービスサイト grip space を、 いずれも Next.js の App Router ＋ 静的書き出しで構築・運用しています。 自分たちで作って回している構成としてお引き受けします。
Next.jsを採用するメリット
検索エンジンに読まれるHTMLを返せる
React だけで作ると、最初に返るHTMLがほぼ空になります。Next.js はサーバー側またはビルド時にHTMLを組み立てて返せるため、検索からの集客を狙うサイトでも中身が読まれます。React 単体との一番大きな違いです。
表示が速い
ビルド時にHTMLを書き出しておけば（静的書き出し）、閲覧時はできあがったファイルを返すだけになります。データベースへの問い合わせが挟まらないぶん、表示までの時間が短くなります。
ページの追加がURLと対応する
ファイルを置いた場所がそのままURLになります。ページを増やす作業が単純なので、公開後にお客様側で運用に載せやすくなります。
React の資産をそのまま使える
Next.js は React の上に載る枠組みです。既に React で作った画面や部品があれば、作り直さずに持ち込めます。
Next.jsでの制作実績
BtoB向けマーケティングツール「grip space」のサービスサイト。製品紹介・機能ページ・活用シーン・コラムまで、300ページを超える構成を Next.js の App Router で構築し、静的書き出しで公開しています。
- ページごとに、そのページで使うCSSだけをHTMLに埋め込む処理を入れ、読み込むファイル数を減らしています
- コラムはページ単位のファイルとして持ち、記事を足すとサイトマップにも自動で載る構成です
- 別ドメインの比較データベースとも、記事から相互に導線を張っています
いまご覧のこのサイトも Next.js の App Router で構築し、静的書き出ししたHTMLをレンタルサーバーに置いて公開しています。
- Node.js が動くサーバーを用意しなくても Next.js のサイトは運用できる、という実例です
- GitHub に反映すると、ビルドから公開までが自動で走ります
- ヘッダー・フッター・料金表などは部品として1つだけ持ち、全ページで使い回しています
Next.jsで実現できること
検索流入を狙うコーポレート・サービスサイト
HTMLを書き出して公開するため、通常のサイトと同じように検索エンジンに読まれます。表示の速さもそのまま評価につながります。
ページ数が多いサイト
共通のヘッダー・フッター・カードを部品として1つ持ち、ページごとにデータだけを差し替えます。数百ページでも作業量が比例して増えません。
WordPress と組み合わせた運用
記事や製品情報は WordPress で更新し、表示は Next.js が担当する構成にもできます。更新はいつもの管理画面のまま、表示だけ速くするやり方です。
Next.js で進めるときに決めておくこと
- 公開のしかたが2通りある
- 「HTMLを書き出して普通のサーバーに置く（静的書き出し）」と「Node.js が動くサーバーで動かす」の2通りがあります。前者はレンタルサーバーでも公開でき、費用も抑えられます。要件をお聞きして選びます。
- 更新のたびにビルドが要る
- 静的書き出しの場合、内容を変えたらHTMLを作り直します。お客様側で頻繁に更新されるサイトでは、更新したら自動でビルドが走る仕組みまで用意します。
- あとから触る人のこと
- Next.js は WordPress ほど触れる人が多くありません。引き継ぎを見据えて、構成をシンプルに保ち、どこを直せば何が変わるかが分かる形でお渡しします。
こんな案件に向いています
検索からの集客が目的のサイト
ここが React 単体との分かれ目です。集客が目的なら Next.js をおすすめします。
表示速度を上げたいサイト
既存サイトが重く、表示の速さを改善したい場合。静的書き出しに寄せるだけで体感が変わります。
ページ数が多く、体裁を揃えたいサイト
製品一覧・事例・拠点一覧など、同じ形のページが並ぶサイト。部品を1つ作って回せます。
更新はお客様側で行いたいサイト
更新する箇所だけ WordPress などのCMSに持ち、Next.js から読み込む構成にできます。
料金
基本料金 0円。ページ単価 × ページ数だけをいただきます。
| ページ数 | Next.js構築 |
|---|---|
| 〜10ページ | 18,000円（＋10,000円） |
| 11〜30ページ | 12,000円 |
| 31〜50ページ | 8,000円 |
| 51ページ〜 | 5,000円 |
- 料金表は1ページあたりの費用です（税抜）。
- 10ページ以下の場合、ページの長さによって括弧内の追加料金が発生します。11ページ以上は追加料金はかかりません。
- 最低利用料金は 50,000円 とさせていただいています。
- APIの組み込み、バックエンドの開発、サーバーの構築・公開設定は別途お見積りで対応します。
対応範囲
- デザインからの構築
- Figma・XD・PSDのデザインデータから、Next.js（App Router）で構築します。レスポンシブ対応込みです。
- 静的書き出しでの公開
- HTMLを書き出す構成にすれば、レンタルサーバーでも公開できます。公開までの設定も承ります。
- TypeScript での実装
- 型を付けた状態で書き起こします。あとから触る人が読める状態でお渡しするためです。
- WordPress との連携
- 記事や製品情報を WordPress で持ち、Next.js から読み込む構成にも対応します。WordPress 側の構築も同じ体制で担当できます。
- 既存プロジェクトへの参加
- 動いている Next.js のリポジトリに、こちらの実装を足す形でも対応します。既存の書き方・命名に合わせます。
デザインデータと画面数をお知らせいただければ、通常1〜2営業日でお見積りをご回答します。
よくある質問
検索エンジンからの集客が目的のサイトは Next.js、ログインした人が使う管理画面や業務アプリは React、というのが基本の考え方です。Next.js は React の上に載る枠組みなので、あとから React の画面を持ち込むこともできます。ご相談いただければ用途をお聞きして提案します。
できます。ビルド時にHTMLを書き出す構成（静的書き出し）にすれば、通常のレンタルサーバーに置くだけで公開できます。実際にこのサイトもその構成です。
更新される箇所を WordPress などのCMSに持たせ、Next.js から読み込む構成にできます。更新はいつもの管理画面のままで、表示だけ Next.js が担当します。ご要望をお聞きして設計します。
承ります。現在のサイトのURL構成を保ったまま作り替えるのが基本方針です。URLが変わる場合は、旧URLから新URLへの転送設定まで含めて対応します。
基本料金は0円で、ページ単価 × ページ数のみです。1ページ18,000円〜（11ページ以上は12,000円〜、31ページ以上は8,000円〜）。最低利用料金は50,000円です。APIの組み込みやサーバーの構築が必要な場合は、別途お見積りいたします。
WordPressとECサイトの制作、
まとめてご相談いただけます
WordPress制作・構築代行
デザインデータやコーディング済みHTMLを、オリジナルテーマとして構築します。プラグイン開発も対応。
構築基本費用 50,000円
詳しく見るコーディングコーディング代行
デザインデータをHTML/CSSに起こします。WordPress化まで通しでも、コーディングだけでも承ります。
1ページ 15,000円〜
詳しく見るReactReactコーディング代行
デザインデータをReactのコンポーネントとして実装します。既存アプリへの画面追加・UI改修だけでも承ります。
1ページ 18,000円〜
詳しく見るNext.js制作・コーディング代行
検索エンジンに読まれるHTMLを返せるNext.jsで構築します。静的書き出しでレンタルサーバーでも公開できます。
1ページ 18,000円〜
いま見ているページWelcartでのECサイト構築
WordPress専用のネットショップ構築プラグイン。機能面まで踏み込んだカスタマイズができます。
デザイン制作＋構築 一式 120万円〜
詳しく見るEC / EC-CUBEEC-CUBEでのECサイト構築
国産オープンソースのECパッケージ。決済・受注・在庫まわりを業務に合わせて作り込めます。
デザイン制作＋構築 一式 120万円〜
詳しく見るEC / ASPカートECサイト制作代行
Shopify・MakeShop・カラーミーなどのカートに、オリジナルデザインを組み込みます。
構築基本費用 100,000円
詳しく見る