【技術覚書】Spring bootプロジェクトにNext.jsアプリを含める時のpom.xml

はじめに

とある理由でバックエンドはSpring Boot、フロントエンドはNext.js、ビルドにはMavenを使って開発します。
ビルドの負担を軽くしたかったので、Next.jsではレンダリング方法をStatic Site Generationとして作成し、出来上がった静的リソースファイルをSpring Bootプロジェクトのtargetフォルダにコピーします。
この記事はその覚書です。
Next.jsにはいくつかのレンダリング方法があるようです。

シナリオ

• バックエンドはRESTFul Web Serviceとして作成しておく
• ローカルでバックエンドを動かしながら、フロントエンドを作りこむ体
• パッケージングは一番最後
• Spring Bootのプロジェクト内にNext.jsアプリ用サブフォルダfrontappを作成
• パッケージングmvn packageの際にnpm run buildを実施し、frontapp/outフォルダに作成した静的ファイルをclasspath:staticフォルダにコピーしてSpring Bootのjarファイルを作成

使用したversion

名称	バージョン
node.js	v18.20.4
npm	10.7.0
spring boot	3.4.0
Java	17

pom.xml

最初はmaven-resources-pluginを使って静的リソースファイルをコピーを試みたのですがNext.jsが生成する_nextフォルダがコピーできない事象に遭遇したのでmaven-antrun-pluginを利用することにしました。

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.15.0</version>
                <configuration>
                    <workingDirectory>frontapp</workingDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>${node.version}</nodeVersion>
                            <npmVersion>${npm.version}</npmVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-antrun-plugin</artifactId>
                <version>1.8</version>
                <executions>
                    <execution>
                        <id>copy-frontend-resources</id>
                        <phase>prepare-package</phase>
                        <configuration>
                            <tasks>
                                <copy todir="${project.build.directory}/classes/static">
                                    <fileset dir="${project.basedir}/frontapp/out" includes="**/*"/>
                                </copy>
                            </tasks>
                        </configuration>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

next.config.ts

上記が動くようにnext.config.tsにも修正が必要です。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: 'export',
};

export default nextConfig;

まとめ

特になし

参考にした記事

• CRUD Application With React and Spring Boot | Baeldung