Vike入門 - Next.js/Nuxtに縛られない、Viteベースの柔軟なフレームワーク

はじめに

フロントエンド開発をしていると、Next.jsやNuxtといったフレームワークを使う機会が多いと思います。ただ、これらのフレームワークって便利な反面、「ここはこうしたいんだけどな」という場面で制約を感じることがあるんですよね。

そこで紹介したいのがVikeというフレームワークです。Viteをベースにした、柔軟性を重視した設計が特徴で、GitHubでは5,500スター以上を獲得しています。Next.jsやNuxtの「いいとこ取り」をしつつ、自分のやりたいようにカスタマイズできる。そんなフレームワークを探している方には刺さる選択肢だと思います。

Vikeの特徴・メリット

フレームワークに縛られない

Vikeの最大の魅力は、React、Vue、Solidといった複数のUIフレームワークに対応している点です。プロジェクトごとに最適なフレームワークを選べるので、「Reactで始めたけど、このプロジェクトはVueの方が良かったかも」という後悔を減らせます。

レンダリング方式を自由に選択

SSR（サーバーサイドレンダリング）
SSG（静的サイト生成）
SPA（シングルページアプリケーション）

これらを用途に応じて柔軟に切り替えられます。ページ単位で違う方式を採用することも可能なので、「トップページはSSGで高速表示、ダッシュボードはSPAでリッチなUI」みたいな構成も実現できます。

Viteベースの高速開発体験

開発サーバーの起動やHMR（Hot Module Replacement）がとにかく速い。これ、地味に開発効率に効いてきます。待ち時間が減ると集中力が途切れにくくなるんですよね。

段階的な移行が可能

既存プロジェクトからの移行時に、一括で全部変える必要がありません。スタックコンポーネントを段階的に移行できる設計になっているので、リスクを抑えながら導入できます。

インストール方法

Vikeのセットアップは公式のスカフォルダーを使うと簡単です。

# Reactの場合
npm create @batijs/app --react

# Vueの場合
npm create @batijs/app --vue

# Solidの場合
npm create @batijs/app --solid

プロジェクトが生成されたら、依存関係をインストールして開発サーバーを起動します。

cd my-vike-app
npm install
npm run dev

これでhttp://localhost:3000でアプリにアクセスできるようになります。

基本的な使い方

ディレクトリ構成

Vikeはファイルベースルーティングを採用しています。基本的な構成はこんな感じです。

my-vike-app/
├── pages/
│   ├── index/
│   │   └── +Page.tsx
│   ├── about/
│   │   └── +Page.tsx
│   └── +Layout.tsx
├── renderer/
│   ├── +onRenderHtml.tsx
│   └── +onRenderClient.tsx
└── vite.config.ts

ページコンポーネントの作成

// pages/index/+Page.tsx
export default function Page() {
  return (
    <div>
      <h1>Welcome to Vike</h1>
      <p>高速で柔軟なフレームワークです。</p>
    </div>
  );
}

データフェッチング

サーバーサイドでデータを取得する場合は、+data.tsファイルを使います。

// pages/users/+data.ts
export async function data() {
  const response = await fetch('https://api.example.com/users');
  const users = await response.json();
  return { users };
}

// pages/users/+Page.tsx
import { useData } from 'vike-react/useData';

export default function Page() {
  const { users } = useData<{ users: User[] }>();

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

レイアウトの設定

共通のレイアウトは+Layout.tsxで定義します。ネストしたレイアウトにも対応しています。

// pages/+Layout.tsx
import './global.css';

export default function Layout({ children }) {
  return (
    <div className="layout">
      <header>
        <nav>
          <a href="/">Home</a>
          <a href="/about">About</a>
        </nav>
      </header>
      <main>{children}</main>
      <footer>© 2026 My App</footer>
    </div>
  );
}

実践的なユースケース

1. 企業のコーポレートサイト

静的サイト生成（SSG）を活用すれば、高速で安定したコーポレートサイトを構築できます。ブログ部分だけ動的にするといった柔軟な構成も可能です。

2. ダッシュボード系アプリケーション

SPA + SSRのハイブリッド構成で、初期表示は高速に、その後はリッチなインタラクションを実現できます。Name.comやSourcegraphといった企業が実際にVikeを採用しているのも納得です。

3. マルチフレームワークプロジェクト

チームによってReact派とVue派が分かれている場合でも、Vikeなら同じエコシステム上で開発を進められます。学習コストを抑えつつ、各チームが得意なフレームワークを使えるのは大きなメリットです。

Next.js/Nuxtとの比較

項目	Vike	Next.js	Nuxt
UIフレームワーク	React/Vue/Solid	React	Vue
ビルドツール	Vite	Turbopack/Webpack	Vite
柔軟性	高い	中程度	中程度
エコシステム	成長中	成熟	成熟
学習コスト	中程度	低め	低め