For my upcoming project, I am considering using a combination of Spring and Next.js.
In the past, I have worked on projects using Spring and React.
I find the API/route structure in Next.js 13 version to be quite intriguing compared to traditional React frameworks.
When working with React, I typically follow a container-presentational pattern and write axios code in container components.
While this approach is possible in Next.js as well, I am interested in leveraging Next's API/route structure for data manipulation.
Furthermore, utilizing Next's structure seems to offer additional security benefits.
The challenge I am facing is passing data in the following sequence:
Spring -> api/route -> pageComponent
I can pass data successfully in the following sequences:
Spring -> pageComponent
api/route -> pageComponent
Below are snippets of my code:
--- Spring
@Configuration
public class WebMvcConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedMethods("GET", "PUT", "POST", "DELETE").allowedOrigins("http://192.168.0.8:3000");
}
};
}
}
@RestController
public class MainController {
@GetMapping("/firstCall")
@ResponseBody
public HashMap<String,Object> firstCall(){
HashMap<String,Object> map = new HashMap<String,Object>();
map.put("age", 24);
map.put("name", "mangdo");
return map;
}
}
--- Next
//route.ts
import axios from "axios"
export async function GET(request: Request) {
let call = await callAxios()
return call
}
async function callAxios(){
const result = await axios.get('http://localhost:8080/firstCall', {
params: { // query string
title: 'NEXT JS'
},
headers: {
'X-Api-Key': 'my-api-key'
}
})
return result.data
}
//page.tsx
export default async function Home() {
const res = await fetch(`http://localhost:3000/api/hello`)
const jsonData = res
console.log('res')
console.log(JSON.parse(JSON.stringify(jsonData)))
//show res {}
return (
<main className={styles.main}>
</main>
)
}
Please help me solve the data transfer problem between Spring and NextJS.