在构建Web应用程序时，越来越多的开发者选择将Next.js用于前端，Spring Boot用于后端。Next.js以其高效构建前端应用程序的方式赢得了开发者的青睐；利用Next.js，您可以灵活地创建全栈应用程序，并配备自定义API。然而，在某些情况下，您可能希望将前端的静态资源与后端应用程序进行无缝集成，以提供更好的用户体验。
本文旨在教您如何在Spring Boot环境中实现与Next.js应用程序的无缝集成，确保浏览器刷新和直接URL输入等场景能够得到正确处理，并同时利用Next.js的静态资源。
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输入等情况，在Next.js项目中创建一个新页面。该页面将帮助处理Next.js中的404错误页面，当用户在浏览器中输入直接URL或刷新页面时。
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 Boot项目。指定必要的依赖项和项目设置，并生成项目结构。
生成项目后，找到build.gradle文件，并使用任何额外的依赖项或插件更新它。该文件用作构建系统的配置。
为了处理API请求，在Spring Boot项目中创建一个控制器类。该类将负责处理与Next.js前端应用程序的通信，并提供必要的数据。
@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; }}为了实现Spring Boot后端和Next.js前端的顺畅集成，创建一个过滤器组件。该组件将拦截请求并执行必要的操作，如直接输入URL或页面刷新。
@Componentpublic 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应用程序无缝交互。
本文链接：http://www.28at.com/showinfo-26-12382-0.html使用Spring Boot和Next.js创建全栈应用指南
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
