Next.jsとDeno: 革新的な技術の組み合わせ

Next.js フロントエンド

この記事では、Next.jsとDenoを組み合わせて効果的なWeb開発を行いながら、それぞれの特徴と利点を説明します。

目次

  1. Next.jsとDenoの概要
  2. Next.jsでDenoサーバーをセットアップ
  3. APIルートの作成
  4. バックエンドAPIにアクセスするためのフロントエンド処理
  5. デプロイ

1. Next.jsとDenoの概要

Next.jsはVercelが開発したReactフレームワークで、サーバーサイドレンダリング、静的サイト生成、APIルートが備わっており、効率的なフロントエンド開発が可能です。

DenoはNode.jsの開発者であるRyan Dahlが開発した新しいJavaScript/TypeScriptランタイムで、セキュリティやモジュールシステムの改善を図っています。

2. Next.jsでDenoサーバーをセットアップ

まず、create-next-appを使用しNext.jsアプリケーションを作成します。

npx create-next-app next-deno
cd next-deno

ディレクトリが作成されたら、Denoサーバーをセットアップするため、server.jsファイルをプロジェクトルートに作成します。以下のコードでDenoを利用できます。

// server.js
import { serve } from "https://deno.land/std@0.117.0/http/server.ts";

const server = serve({ port: 3000 });

console.log("Deno server is running on http://localhost:3000");

for await (const req of server) {
  req.respond({ body: "Hello Deno!" });
}

サーバーを起動するには、ターミナルで以下のコマンドを実行します。

deno run --allow-net server.js

ブラウザでhttp://localhost:3000にアクセスし、"Hello Deno!"が表示されれば成功です。

3. APIルートの作成

Next.jsでAPIルートを作成します。pages/api/hello-deno.jsを作成し、以下のコードを追加します。

// pages/api/hello-deno.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello from Deno API!" });
}

4. バックエンドAPIにアクセスするためのフロントエンド処理

バックエンドAPIにアクセスするためのフロントエンド処理をpages/index.jsに追加します。

// pages/index.js

import React, { useState, useEffect } from "react";

export default function Home() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("/api/hello-deno")
      .then((response) => response.json())
      .then(({ message }) => setMessage(message));
  }, []);

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

5. デプロイ

Denoをサポートしているホスティングサービスであれば、デプロイが可能です。Deno Deployを利用することで、簡単にデプロイできます。

Next.jsアプリケーションをVercel（https://vercel.com）へデプロイするには、Vercel CLIを使用します。

Vercel CLIをインストールし、デプロイコマンドを実行します。

npm i -g vercel
vercel

これでNext.jsとDenoを組み合わせたWebアプリケーション開発の方法を学びました。Next.jsで高効率なフロントエンドを構築しながら、Denoを使ったセキュアでモダンなバックエンドAPIを実装できます。革新的な技術を組み合わせて、より効果的な開発プロセスを楽しみましょう！