Next.js × Spring Boot 環境構築

# 【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`フォルダを作成。
```bash
npx create-next-app@latest frontend-app --app
```
> :pushpin: プロジェクトのルート直下で実行

### ✅ 設定内容（App Router構成）
**全てYesでOK**

- TypeScript: ✅ Yes  
- ESLint: ✅ Yes  
- Tailwind CSS: ✅ Yes  
- App Router: ✅ Yes 
- `src/` ディレクトリ使用: ✅ Yes  
- import alias: ✅ Yes (`@/`)  

---

## ✅ 2. axios の導入
次にバックエンドとの通信手段であるaxiosを導入します。
`Axios（アクシオス）とは`、フロントとサーバー間でのデータのやり取りを
簡単に行うためのHTTPクライアントライブラリです。

**詳しくはこちら**

https://axios-http.com/ja/docs/intro

というわけで早速インストールしていきます！
```bash
npm install axios
```
> :pushpin: ✅ 1.で作成したフォルダに移動後コマンドを実行
---

## ✅ 3.デモ画面の作成（`app/demo/page.tsx`）
次のバックエンドからメッセージを受け取り表示する
簡単なデモ画面を作成していきます。

今回のシステムでは`App Router`を採用しているため
`app`直下に`demo`というフォルダを作成し、そこに以下のファイルを作成します。


```tsx:demo/page.tsx
"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の違いについては以下を参考**

https://qiita.com/Ric-oo/items/c5961eb40ae9779e8d32

https://qiita.com/YushiYamamoto/items/a02c96a4348b00467972

自分自身、まだどういう使いわけをしたら良いか判断はできていません
今回はとりあえず公式が推奨しているApp Routerを使用しています。

---

## ✅ 4.バックエンドのAPIエンドポイントを修正（Spring Boot）
前回作成したAPIをフロントのデモ画面に渡す用として修正していきます。
具体的にはJSON形式でデータを返すようにしたいのと
**CORS(クロスオリジン通信)** の制限を設定していきます。

**CORSについては以下の記事を参考**

https://qiita.com/m_kikuchi/items/df8c070b228df44a5462

**公式ドキュメント**

https://docs.spring.io/spring-framework/docs/5.2.1.RELEASE/spring-framework-reference/web.html#mvc-cors-controller

CORSの設定は` @CrossOrigin`を利用することでもできるのですが、
後々のことを考えると新しいcontrollerごとにアノテーションを付与するのも面倒なので
今回はCORS設定用のファイルを作成し、一元管理していきます。

### :one:： CORS設定用ファイル作成（`backend/config/WebConfig.java`）
```java: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`を使って
データを返すようにしてみたいと思います。

### :two: DTOクラスの作成（`backend/dto/GreetingResponse.java`）
```java:dto/GreetingResponse.java
package com.example.backend.dto;

import lombok.AllArgsConstructor;
import lombok.Getter;

@Getter
@AllArgsConstructor
public class GreetingResponse {
    private String message;
}
```
> lombok を使って、コンストラクタとGetterだけ定義してコードを見やすくします

### :three:　Controllerの修正（`backend/controller/GreetingController.java`）
```java: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直下で以下のコマンドを実行**
```bash
npm run dev
```
次にDocker Desktop で直接起動もしくは
**ルート直下で以下のコマンドを実行**
```bash
docker-compose up -d
```
これでフロントエンド、バックエンド共にサーバーが起動しました。
実際に`http://localhost:3000/demo`にアクセスしてみて
以下の画像のようになれば成功です！

![スクリーンショット 2025-04-10 091857.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619847/21a5ec29-551f-4b56-ad25-2e007e971f71.png)


## ✅ 最後に
以上で今回の内容は終了です、お疲れさまでした！
これまでの記事と合わせてひとまずシステム開発をおこなうことができる
環境が完成しました！

今後の目標としては、より開発しやすい環境を目指して自動テストの導入や
実際に構築した環境で簡単なWebシステムを開発、デプロイなどに挑戦してみようと
思っています。

その時はまた記事にすると思うので見ていただけると嬉しいです！
ここまで読んでいただきありがとうございました 🙏  

---

## ✅参考にした記事

**公式ドキュメント集**

https://axios-http.com/ja/docs/intro

https://docs.spring.io/spring-framework/docs/5.2.1.RELEASE/spring-framework-reference/web.html#mvc-cors-controller

---
**有識者様の記事**

https://qiita.com/Ric-oo/items/c5961eb40ae9779e8d32

https://qiita.com/YushiYamamoto/items/a02c96a4348b00467972

https://qiita.com/m_kikuchi/items/df8c070b228df44a5462