【Next.js × Spring Boot】App Router構成でAPIを叩くまでの環境構築まとめ
今回は、以前作成した Spring Boot のバックエンドと連携するために、
Next.js の環境構築、デモ画面からAPIをfetchしてデータを取得するところまでをまとめました。
🎯 この記事の目的
- Next.js（App Router構成）の環境構築
- フロントからバックエンドのSpring Boot APIをaxiosで叩く
- Spring BootのレスポンスをDTO形式でJSON返却に対応
- CORS対応を設定クラスで管理
- App RouterやDTOの基礎知識を整理
🧰 使用技術スタック
| カテゴリ | 技術・ツール |
|---|---|
| フロントエンド | Next.js（App Router構成） |
| 通信 | axios |
| バックエンド | Spring Boot |
✅ 1. Next.js のセットアップ（App Router）
まずはフロントエンドの環境を構築していきます、今回は最近モダンな技術でもある
Next.jsを使っていこうと思います。
以下のコマンドを実行してfrontendフォルダを作成。
npx create-next-app@latest frontend-app --app
プロジェクトのルート直下で実行
✅ 設定内容（App Router構成）
全てYesでOK
- TypeScript: ✅ Yes
- ESLint: ✅ Yes
- Tailwind CSS: ✅ Yes
- App Router: ✅ Yes
-
src/ディレクトリ使用: ✅ Yes - import alias: ✅ Yes (
@/)
✅ 2. axios の導入
次にバックエンドとの通信手段であるaxiosを導入します。
Axios（アクシオス）とは、フロントとサーバー間でのデータのやり取りを
簡単に行うためのHTTPクライアントライブラリです。
詳しくはこちら
というわけで早速インストールしていきます！
npm install axios
✅ 3.デモ画面の作成（app/demo/page.tsx）
次のバックエンドからメッセージを受け取り表示する
簡単なデモ画面を作成していきます。
今回のシステムではApp Routerを採用しているため
app直下にdemoというフォルダを作成し、そこに以下のファイルを作成します。
"use client"; // クライアントコンポーネントとして明示する
import { useEffect, useState } from "react";
import axios from "axios";
export default function DemoPage() {
const [data, setData] = useState<any>(null);
useEffect(() => {
axios
.get("http://localhost:8080/api/hello")
.then((res) => setData(res.data))
.catch((err) => console.error(err));
}, []);
return (
<div>
<h1>デモページ</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
App RouterとPage Routerの違いについては以下を参考
自分自身、まだどういう使いわけをしたら良いか判断はできていません
今回はとりあえず公式が推奨しているApp Routerを使用しています。
✅ 4.バックエンドのAPIエンドポイントを修正（Spring Boot）
前回作成したAPIをフロントのデモ画面に渡す用として修正していきます。
具体的にはJSON形式でデータを返すようにしたいのと
CORS(クロスオリジン通信) の制限を設定していきます。
CORSについては以下の記事を参考
公式ドキュメント
CORSの設定は @CrossOriginを利用することでもできるのですが、
後々のことを考えると新しいcontrollerごとにアノテーションを付与するのも面倒なので
今回はCORS設定用のファイルを作成し、一元管理していきます。
： CORS設定用ファイル作成（backend/config/WebConfig.java）
package com.example.backend.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
}
.allowedOrigins("")で設定したホストからのみリクエストを受け付けてくれる
次にレスポンスとして返すメッセージをJSON形式で返そうと思ったのですが
調べてみると@RestControllerというアノテーションをつけることによって自動で
JSONとしてシリアライズされていたようです。
なので今回は今後の拡張性を考えて、DTOを使って
データを返すようにしてみたいと思います。
DTOクラスの作成（backend/dto/GreetingResponse.java）
package com.example.backend.dto;
import lombok.AllArgsConstructor;
import lombok.Getter;
@Getter
@AllArgsConstructor
public class GreetingResponse {
private String message;
}
lombok を使って、コンストラクタとGetterだけ定義してコードを見やすくします
Controllerの修正（backend/controller/GreetingController.java）
package com.example.backend.controller;
import com.example.backend.dto.GreetingResponse;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api")
public class GreetingController {
@GetMapping("/hello")
public GreetingResponse hello() {
return new GreetingResponse("Hello World from Spring Boot!");
}
}
このようにすることで、このAPIがどんなデータを返すかが一目でわかる ようになります。
また今回はあまり関係のない事例ですが、dbからユーザー情報を取得して返すAPIなどの場合
passwordなどレスポンスに含めたくないデータなどもあります。
このような時にDTOを用いて特定の情報のみを返すように定義したりもできてとても便利です。
✅ 5. ブラウザで確認
最期に今回作成したdemo/page.tsxにアクセスして実際にAPIから
データを取得できるか確認してみます。
/frontend直下で以下のコマンドを実行
npm run dev
次にDocker Desktop で直接起動もしくは
ルート直下で以下のコマンドを実行
docker-compose up -d
これでフロントエンド、バックエンド共にサーバーが起動しました。
実際にhttp://localhost:3000/demoにアクセスしてみて
以下の画像のようになれば成功です！
✅ 最後に
以上で今回の内容は終了です、お疲れさまでした！
これまでの記事と合わせてひとまずシステム開発をおこなうことができる
環境が完成しました！
今後の目標としては、より開発しやすい環境を目指して自動テストの導入や
実際に構築した環境で簡単なWebシステムを開発、デプロイなどに挑戦してみようと
思っています。
その時はまた記事にすると思うので見ていただけると嬉しいです！
ここまで読んでいただきありがとうございました 🙏
✅参考にした記事
公式ドキュメント集
有識者様の記事