在構建Web應用程序時，越來越多的開發(fā)者選擇將Next.js用于前端，Spring Boot用于后端。Next.js以其高效構建前端應用程序的方式贏得了開發(fā)者的青睞；利用Next.js，您可以靈活地創(chuàng)建全棧應用程序，并配備自定義API。然而，在某些情況下，您可能希望將前端的靜態(tài)資源與后端應用程序進行無縫集成，以提供更好的用戶體驗。6R928資訊網(wǎng)——每日最新資訊28at.com

6R928資訊網(wǎng)——每日最新資訊28at.com

本文旨在教您如何在Spring Boot環(huán)境中實現(xiàn)與Next.js應用程序的無縫集成，確保瀏覽器刷新和直接URL輸入等場景能夠得到正確處理，并同時利用Next.js的靜態(tài)資源。6R928資訊網(wǎng)——每日最新資訊28at.com

1. 使用以下命令創(chuàng)建Next.js應用程序

npx create-next-app@latest

此命令將使用最新版本設置一個新的Next.js項目，為您構建前端提供堅實的基礎。6R928資訊網(wǎng)——每日最新資訊28at.com

創(chuàng)建Next.js項目后，打開您喜歡的文本編輯器，如Visual Studio Code。這樣可以讓您處理前端代碼并進行必要的修改。6R928資訊網(wǎng)——每日最新資訊28at.com

在package.json和next.config.js中進行必要的更改并構建項目。6R928資訊網(wǎng)——每日最新資訊28at.com

2. 從后端獲取數(shù)據(jù)

在Next.js項目中創(chuàng)建一個名為list.js的文件，負責從Spring Boot API獲取數(shù)據(jù)。實現(xiàn)從后端檢索數(shù)據(jù)并在前端呈現(xiàn)的必要邏輯。6R928資訊網(wǎng)——每日最新資訊28at.com

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應用程序的刷新和直接URL輸入

為了處理Web應用程序的刷新或直接URL輸入等情況，在Next.js項目中創(chuàng)建一個新頁面。該頁面將幫助處理Next.js中的404錯誤頁面，當用戶在瀏覽器中輸入直接URL或刷新頁面時。6R928資訊網(wǎng)——每日最新資訊28at.com

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項目，將創(chuàng)建一個帶有已編譯和優(yōu)化的Next.js應用程序的“out”文件夾。6R928資訊網(wǎng)——每日最新資訊28at.com

4. 使用Spring Initializr創(chuàng)建新Spring Boot項目

使用Spring Initializr創(chuàng)建一個新的Spring Boot項目。指定必要的依賴項和項目設置，并生成項目結構。6R928資訊網(wǎng)——每日最新資訊28at.com

生成項目后，找到build.gradle文件，并使用任何額外的依賴項或插件更新它。該文件用作構建系統(tǒng)的配置。6R928資訊網(wǎng)——每日最新資訊28at.com

5. 為API創(chuàng)建控制器類

為了處理API請求，在Spring Boot項目中創(chuàng)建一個控制器類。該類將負責處理與Next.js前端應用程序的通信，并提供必要的數(shù)據(jù)。6R928資訊網(wǎng)——每日最新資訊28at.com

@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或頁面刷新。6R928資訊網(wǎng)——每日最新資訊28at.com

@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);        }    }}

7. 與后端集成前端

將Next.js項目的“out”文件夾中的靜態(tài)內容復制到Spring Boot項目的/src/main/resources/static文件夾中。這樣可以確保前端資源可以從Spring Boot服務器訪問。6R928資訊網(wǎng)——每日最新資訊28at.com

通過運行以下命令構建Spring Boot項目：6R928資訊網(wǎng)——每日最新資訊28at.com

gradlew clean assemble

成功完成構建過程后，您會在“build/distributions”目錄中找到一個zip文件。解壓縮此zip文件的內容，并執(zhí)行相應的腳本，例如批處理文件（.bat），以啟動Spring Boot服務器。6R928資訊網(wǎng)——每日最新資訊28at.com

一旦服務器開始運行，您可以通過打開Web瀏覽器并輸入以下URL來訪問應用程序：http://localhost:8080。這將使您能夠與Spring Boot應用程序無縫交互。6R928資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-12382-0.html使用Spring Boot和Next.js創(chuàng)建全棧應用指南

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： PHP和Python哪個更適合Web開發(fā)？

下一篇： Go 并發(fā)可視化解釋 - Semaphore