使用Spring Boot和Next.js創(chuàng)建全棧應(yīng)用指南
在構(gòu)建Web應(yīng)用程序時，越來越多的開發(fā)者選擇將Next.js用于前端，Spring Boot用于后端。Next.js以其高效構(gòu)建前端應(yīng)用程序的方式贏得了開發(fā)者的青睞；利用Next.js，您可以靈活地創(chuàng)建全棧應(yīng)用程序，并配備自定義API。然而，在某些情況下，您可能希望將前端的靜態(tài)資源與后端應(yīng)用程序進行無縫集成，以提供更好的用戶體驗。
本文旨在教您如何在Spring Boot環(huán)境中實現(xiàn)與Next.js應(yīng)用程序的無縫集成，確保瀏覽器刷新和直接URL輸入等場景能夠得到正確處理，并同時利用Next.js的靜態(tài)資源。
1. 使用以下命令創(chuàng)建Next.js應(yīng)用程序
npx create-next-app@latest此命令將使用最新版本設(shè)置一個新的Next.js項目，為您構(gòu)建前端提供堅實的基礎(chǔ)。
創(chuàng)建Next.js項目后，打開您喜歡的文本編輯器，如Visual Studio Code。這樣可以讓您處理前端代碼并進行必要的修改。
在package.json和next.config.js中進行必要的更改并構(gòu)建項目。
2. 從后端獲取數(shù)據(jù)
在Next.js項目中創(chuàng)建一個名為list.js的文件，負(fù)責(zé)從Spring Boot API獲取數(shù)據(jù)。實現(xiàn)從后端檢索數(shù)據(jù)并在前端呈現(xiàn)的必要邏輯。
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;3. 創(chuàng)建新頁面處理Web應(yīng)用程序的刷新和直接URL輸入
為了處理Web應(yīng)用程序的刷新或直接URL輸入等情況，在Next.js項目中創(chuàng)建一個新頁面。該頁面將幫助處理Next.js中的404錯誤頁面，當(dāng)用戶在瀏覽器中輸入直接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;構(gòu)建并導(dǎo)出一個Next.js項目，將創(chuàng)建一個帶有已編譯和優(yōu)化的Next.js應(yīng)用程序的“out”文件夾。
4. 使用Spring Initializr創(chuàng)建新Spring Boot項目
使用Spring Initializr創(chuàng)建一個新的Spring Boot項目。指定必要的依賴項和項目設(shè)置，并生成項目結(jié)構(gòu)。
生成項目后，找到build.gradle文件，并使用任何額外的依賴項或插件更新它。該文件用作構(gòu)建系統(tǒng)的配置。
5. 為API創(chuàng)建控制器類
為了處理API請求，在Spring Boot項目中創(chuàng)建一個控制器類。該類將負(fù)責(zé)處理與Next.js前端應(yīng)用程序的通信，并提供必要的數(shù)據(jù)。
@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;
}
}6. 為Next.js集成創(chuàng)建過濾器組件
為了實現(xiàn)Spring Boot后端和Next.js前端的順暢集成，創(chuàng)建一個過濾器組件。該組件將攔截請求并執(zhí)行必要的操作，如直接輸入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);
}
}
}7. 與后端集成前端
將Next.js項目的“out”文件夾中的靜態(tài)內(nèi)容復(fù)制到Spring Boot項目的/src/main/resources/static文件夾中。這樣可以確保前端資源可以從Spring Boot服務(wù)器訪問。
通過運行以下命令構(gòu)建Spring Boot項目：
gradlew clean assemble成功完成構(gòu)建過程后，您會在“build/distributions”目錄中找到一個zip文件。解壓縮此zip文件的內(nèi)容，并執(zhí)行相應(yīng)的腳本，例如批處理文件（.bat），以啟動Spring Boot服務(wù)器。
一旦服務(wù)器開始運行，您可以通過打開Web瀏覽器并輸入以下URL來訪問應(yīng)用程序：http://localhost:8080。這將使您能夠與Spring Boot應(yīng)用程序無縫交互。
