制作 Web 应用程序是一门细致的艺术，我在前端的 Next.js 和强大的 Spring Boot 后端的融合中找到了我最喜欢的画布。Next.js因其高效的前端开发能力而俘获了我的心。借助 Next.js，您可以在画布上进行绘制，从而使您能够制作通过您独特的 API 丰富的全栈应用程序。
然而，这段旅程并非没有细微差别。有时，静态资产与后端应用程序的和谐集成对于无缝用户体验至关重要。
这就是本指南的用武之地。它致力于教您在 Spring Boot 环境中从 Next.js 应用程序无缝提供静态资产的艺术。我们的主要目标是解决浏览器刷新和直接 URL 输入的挑战，确保 Tomcat 服务器内流畅的用户体验，同时充分利用 Next.js 的静态资源。
如果您渴望深入研究使用 Spring Boot 和 Next.js 创建全栈 Web 应用程序的复杂性，那么本文就是您导航旅程的指南针。
使用以下命令创建 Nextjs 应用程序
npx create-next-app@latest
此命令会设置一个新的具有最新版本的 Next.js 项目，为您构建前端提供坚实的基础。
创建 Next.js 项目后，在您首选的文本编辑器（例如 Visual Studio Code）中将其打开。这将允许您使用前端代码并进行必要的修改。
在 package.json 和 next.config.js 中进行必要的更改并构建项目
从后端获取数据
在 Next.js 项目中创建一个 list.js 文件，负责从 Spring Boot API 获取数据。实现必要的逻辑以从后端检索数据并将其呈现在前端。
function List() {
const [list, setList] = useState([])
const fetchList = () => {
fetch("/e3docs/getlist")
.then(response => {
return response.json()
})
.then(data => {
setList(data)
})
}
useEffect(() => {
fetchList()
}, [])
function getlist() {
return list.map((item, i) => {
return (
<Fragment key={i}>
<tr>
<td>
{(i + 1)}
</td>
<td>
{item}
</td>
</tr>
</Fragment>
);
})
}
return (
<main>
<div style={{ paddingLeft: '34%', paddingTop: '2%', display: 'flex' }}>
<h2 style={{ paddingRight: '10px' }}>
<Link href="/">Home</Link>
</h2>
<h2>
<Link href="/list">List</Link>
</h2>
</div>
<div style={{ paddingLeft: '34%', paddingTop: '3%' }}>
<table>
<thead>
<tr>
<th>No.</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{list.length > 0 && (getlist())}
</tbody>
</table >
</div>
</main>
);
}
export default List;
创建新页面来处理 Web 应用程序刷新和直接 URL 输入
要处理 Web 应用程序刷新或直接 URL 输入等场景，请在 Next.js 项目中创建一个新页面。当用户在浏览器中直接输入 URL 或页面刷新时，该页面将有助于处理 Next JS 中的 404 错误页面。
function PageRefresh() {
const router = useRouter();
useEffect(() => {
if (router.isReady) {
router.push(router.asPath).catch((e) => {
router.push('/_error');
});
}
}, [router.isReady])
return (
<div>Loading...</div>
);
}
export default PageRefresh;
构建并导出 Next.js 项目，该项目将使用编译和优化的 Next.js 应用程序创建一个“out”文件夹。
使用 Spring Initializr 创建新项目
使用Spring Initializr创建一个新的 Spring Boot 项目。指定必要的依赖项和项目设置，并生成项目结构。
生成项目后，找到 build.gradle 文件并使用应用程序所需的任何其他依赖项或插件更新它。该文件用作构建系统的配置。
为 API 创建控制器类
要处理 API 请求，请在 Spring Boot 项目中创建一个控制器类。此类将定义端点及其关联的请求处理方法，允许您与后端 API 进行交互。
@RestController
@RequestMapping("e3docs")
public class E3DocsController {
@GetMapping("/getlist")
public List<String> getList() {
List<String> list = new ArrayList<String>();
list.add("India");
list.add("China");
list.add("United States(US)");
list.add("Russia");
list.add("Australia");
list.add("African");
list.add("Europe");
return list;
}
}
为 Next.js 集成创建过滤器组件
为了在 Spring Boot 后端和 Next.js 前端之间顺利集成，请创建一个过滤器组件。该组件将拦截请求并执行必要的操作，例如直接 URL 输入或页面刷新。
@Component
public class PageRefreshFilter implements Filter {
private static final String PAGE = "/pagerefresh/pagerefresh.html";
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
doFilter((HttpServletRequest) request, (HttpServletResponse) response, chain);
}
private void doFilter(HttpServletRequest request, HttpServletResponse response, FilterChain chain)
throws IOException, ServletException {
String path = request.getServletPath();
if ("/".equals(path) || path.contains(".") || path.contains("e3docs")) {
chain.doFilter(request, response);
} else {
request.getRequestDispatcher(PAGE).forward(request, response);
}
}
}
前端与后端集成
将静态内容从 Next.js 项目的“out”文件夹复制到 Spring Boot 项目的 /src/main/resources/static 文件夹中。这确保了可以从 Spring Boot 服务器访问前端资产。
通过运行以下命令构建 Spring Boot 项目：gradlew clean assemble
成功完成构建过程后，您将在“build/distributions”目录中找到一个 zip 文件。提取该 zip 文件的内容并执行相关脚本（例如批处理文件（例如 .bat））以启动 Spring Boot 服务器。
服务器运行后，您可以通过打开 Web 浏览器并输入以下 URL 来访问该应用程序：http://localhost:8080。这将使您能够与 Spring Boot 应用程序无缝交互。
有关每个步骤的详细演练，包括具体配置和故障排除提示，请参阅下面提到的完整文章。
使用 Spring Boot 和 Next js 创建全栈 Web 应用程序
快乐编码！😃
