Creating a Fullstack Web Application with Spring Boot and Next.js

Building a web application combining Next.js for the front end and a Spring Boot backend has become my preferred approach. Next.js has won my heart as it offers an efficient way to craft front-end applications. With Next.js, you have the flexibility to create full-stack applications, complete with your customized API. Nevertheless, there are instances where you may prefer to integrate static assets with your backend application to serve the front end seamlessly.

This guide is dedicated to teaching you how to seamlessly serve static assets from a Next.js application within a Spring Boot environment. Our primary aim in this article is to address issues related to browser refreshes and direct URL entry, ensuring smooth handling of these scenarios within the Tomcat server while incorporating Next.js static resources.

Go to the original article for more Creating a Full Stack Web Application with Spring Boot and Next js

Create a Nextjs app with the following command

npx create-next-app@latest

This command sets up a new Next.js project with the latest version, providing you with a solid foundation for building the front end.

Once the Next.js project is created, open it in your preferred text editor, such as Visual Studio Code. This will allow you to work with the front-end code and make necessary modifications.

Make necessary changes in package.json & next.config.js and build the project

Fetch Data from the Backend

Create a list.js file in the Next.js project responsible for fetching data from the Spring Boot API. Implement the necessary logic to retrieve data from the backend and render it in the front end.

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;

Create a New Page to Handle Web App Refresh and Direct URL Entry

To handle scenarios like web app refresh or direct URL entry, create a new page in the Next.js project. This page will help to handle the 404 error page in Next JS when the user enters a direct URL into the browser or the page refreshes.

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;

Build and export a Next.js project that will create an “out” folder with the compiled and optimized Next.js application.

Create a New Project with Spring Initializr

Use Spring Initializr to create a new Spring Boot project. Specify the necessary dependencies and project settings, and generate the project structure.

After generating the project, locate the build.gradle file and update it with any additional dependencies or plugins required for your application. This file serves as the configuration for your build system.

Create a Controller Class for API

To handle API requests, create a controller class in your Spring Boot project. This class will define the endpoints and their associated request-handling methods, allowing you to interact with your backend 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;  
 }  
}

Create a Filter Component for Next.js Integration

For smooth integration between the Spring Boot backend and the Next.js frontend, create a filter component. This component will intercept requests and perform necessary actions like direct URL entry or page refresh.

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

Integrate the Frontend with the Backend

Copy the static content from the “out” folder of the Next.js project into the Spring Boot project’s /src/main/resources/static folder. This ensures that the frontend assets are accessible from the Spring Boot server.

Build the Spring Boot project by running the following command:

gradlew clean assemble

Upon successfully completing the build process, you’ll locate a zip file within the “build/distributions” directory. Extract the contents of this zip file and execute the relevant script, such as a batch file (e.g., .bat), to initiate the Spring Boot server.

Once the server is operational, you can access the application by opening your web browser and entering the following URL: http://localhost:8080. This will allow you to interact with your Spring Boot application seamlessly.

For a detailed walkthrough of each step, including specific configurations and troubleshooting tips, please refer to the full article mentioned below.

Creating a Fullstack Web Application with Spring Boot and Next js

Happy coding! 😃