I'm working on a project where I have a Next.js frontend and a Rails backend. When I use Postman to make a GET request to http://localhost:3000/books, it works perfectly and returns the expected JSON data. However, when I try to make the same request using Axios from my Next.js frontend, I get a 404 error, and the response contains the HTML of my Next.js homepage instead of the JSON data from the Rails backend.
Here is my setup:
Next.js Axios Request:
export default async function HomePageConnected() {
let data = null;
axios.get("http://localhost:3000/books").then((response) => {
data = response.data;
});
console.log("Data - " + data)
return (
<>
<h1>Welcome, you are connected</h1>
</>
)
}
Rails CORS Configuration (config/application.rb):
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'http://localhost:80'
resource '*',
headers: :any,
methods: %i[get post put patch delete options head],
expose: ['Authorization']
end
end
Rails Routes (config/routes.rb):
Rails.application.routes.draw do
resources :books, only: [:index, :show, :create, :update, :destroy]
end
Additional Details:
- Axios requests to external APIs (like GitHub) work fine from the Next.js frontend.
- The Rails server is running and accessible via Postman and browser.
- When I check my nextjs server's log, I get a 404 error and within the data section, I get the homepage of my frontend server...
- The 404 error is not even wrote within the backend logs, it is like if the request never reach the backend
Question:
What could be causing the Axios request from my Next.js frontend to return a 404 error instead of the expected JSON data from the Rails backend?
Any help or pointers would be greatly appreciated.
PS: Here is my server error:
unhandledRejection: AxiosError: Request failed with status code 404
at settle (webpack-internal:///(rsc)/./node_modules/axios/lib/core/settle.js:24:12)
at Unzip.handleStreamEnd (webpack-internal:///(rsc)/./node_modules/axios/lib/adapters/http.js:618:71)
at Unzip.emit (node:events:532:35)
at endReadableNT (node:internal/streams/readable:1696:12)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
at Axios.request (webpack-internal:///(rsc)/./node_modules/axios/lib/core/Axios.js:57:41)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
code: 'ERR_BAD_REQUEST',
config: {
transitional: {
silentJSONParsing: true,
forcedJSONParsing: true,
clarifyTimeoutError: false
},
adapter: [ 'xhr', 'http', 'fetch' ],
transformRequest: [ [Function: transformRequest] ],
transformResponse: [ [Function: transformResponse] ],
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
env: { FormData: [Function], Blob: [class Blob] },
validateStatus: [Function: validateStatus],
headers: Object [AxiosHeaders] {
Accept: 'application/json, text/plain, */*',
'Content-Type': undefined,
'User-Agent': 'axios/1.7.0',
'Accept-Encoding': 'gzip, compress, deflate, br'
},
method: 'get',
url: 'http://localhost:3000/books',
data: undefined
},
request: <ref *1> ClientRequest {
_events: [Object: null prototype] {
abort: [Function (anonymous)],
aborted: [Function (anonymous)],
connect: [Function (anonymous)],
error: [Function (anonymous)],
socket: [Function (anonymous)],
timeout: [Function (anonymous)],
finish: [Function: requestOnFinish]
},
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: true,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: true,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
strictContentLength: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
_closed: true,
_header: 'GET /books HTTP/1.1\r\n' +
'Accept: application/json, text/plain, */*\r\n' +
'User-Agent: axios/1.7.0\r\n' +
'Accept-Encoding: gzip, compress, deflate, br\r\n' +
'Host: localhost:3000\r\n' +
'Connection: keep-alive\r\n' +
'\r\n',
_keepAliveTimeout: 0,
_onPendingData: [Function: nop],
agent: Agent {
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
defaultPort: 80,
protocol: 'http:',
options: [Object: null prototype],
requests: [Object: null prototype] {},
sockets: [Object: null prototype] {},
freeSockets: [Object: null prototype],
keepAliveMsecs: 1000,
keepAlive: true,
maxSockets: Infinity,
maxFreeSockets: 256,
scheduling: 'lifo',
maxTotalSockets: Infinity,
totalSocketCount: 1,
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false
},
socketPath: undefined,
method: 'GET',
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
joinDuplicateHeaders: undefined,
path: '/books',
_ended: true,
res: IncomingMessage {
_events: [Object],
_readableState: [ReadableState],
_maxListeners: undefined,
socket: null,
httpVersionMajor: 1,
httpVersionMinor: 1,
httpVersion: '1.1',
complete: true,
rawHeaders: [Array],
rawTrailers: [],
joinDuplicateHeaders: undefined,
aborted: false,
upgrade: false,
url: '',
method: null,
statusCode: 404,
statusMessage: 'Not Found',
client: [Socket],
_consuming: true,
_dumped: false,
req: [Circular *1],
_eventsCount: 4,
responseUrl: 'http://localhost:3000/books',
redirects: [],
[Symbol(shapeMode)]: true,
[Symbol(kCapture)]: false,
[Symbol(kHeaders)]: [Object],
[Symbol(kHeadersCount)]: 20,
[Symbol(kTrailers)]: null,
[Symbol(kTrailersCount)]: 0
},
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'localhost',
protocol: 'http:',
_redirectable: Writable {
_events: [Object],
_writableState: [WritableState],
_maxListeners: undefined,
_options: [Object],
_ended: true,
_ending: true,
_redirectCount: 0,
_redirects: [],
_requestBodyLength: 0,
_requestBodyBuffers: [],
_eventsCount: 3,
_onNativeResponse: [Function (anonymous)],
_currentRequest: [Circular *1],
_currentUrl: 'http://localhost:3000/books',
[Symbol(shapeMode)]: true,
[Symbol(kCapture)]: false
},
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(kBytesWritten)]: 0,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kChunkedBuffer)]: [],
[Symbol(kChunkedLength)]: 0,
[Symbol(kSocket)]: Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: 'localhost',
_closeAfterHandlingError: false,
_events: [Object],
_readableState: [ReadableState],
_writableState: [WritableState],
allowHalfOpen: false,
_maxListeners: undefined,
_eventsCount: 6,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: null,
_server: null,
timeout: 5000,
parser: null,
_httpMessage: null,
autoSelectFamilyAttemptedAddresses: [Array],
[Symbol(async_id_symbol)]: -1,
[Symbol(kHandle)]: [TCP],
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: Timeout {
_idleTimeout: 5000,
_idlePrev: [TimersList],
_idleNext: [Timeout],
_idleStart: 3379877,
_onTimeout: [Function: bound ],
_timerArgs: undefined,
_repeat: null,
_destroyed: false,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 580939,
[Symbol(triggerId)]: 580936,
[Symbol(kResourceStore)]: [Object],
[Symbol(kResourceStore)]: [Object],
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: undefined,
[Symbol(kResourceStore)]: [Object],
[Symbol(kResourceStore)]: undefined
},
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(shapeMode)]: true,
[Symbol(kCapture)]: false,
[Symbol(kSetNoDelay)]: true,
[Symbol(kSetKeepAlive)]: true,
[Symbol(kSetKeepAliveInitialDelay)]: 1,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0
},
[Symbol(kOutHeaders)]: [Object: null prototype] {
accept: [Array],
'user-agent': [Array],
'accept-encoding': [Array],
host: [Array]
},
[Symbol(errored)]: null,
[Symbol(kHighWaterMark)]: 65536,
[Symbol(kRejectNonStandardBodyWrites)]: false,
[Symbol(kUniqueHeaders)]: null
},
response: {
status: 404,
statusText: 'Not Found',
headers: Object [AxiosHeaders] {
'cache-control': 'no-store, must-revalidate',
vary: 'RSC, Next-Router-State-Tree, Next-Router-Prefetch, Accept-Encoding',
link: '</_next/static/media/c9a5bc6a7c948fb0-s.p.woff2>; rel=preload; as="font"; crossorigin=""; type="font/woff2"',
'x-powered-by': 'Next.js',
'content-type': 'text/html; charset=utf-8',
date: 'Mon, 20 May 2024 10:19:04 GMT',
connection: 'keep-alive',
'keep-alive': 'timeout=5',
'transfer-encoding': 'chunked'
},
config: {
transitional: [Object],
adapter: [Array],
transformRequest: [Array],
transformResponse: [Array],
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
env: [Object],
validateStatus: [Function: validateStatus],
headers: [Object [AxiosHeaders]],
method: 'get',
url: 'http://localhost:3000/books',
data: undefined
},
request: <ref *1> ClientRequest {
_events: [Object: null prototype],
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: true,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: true,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
strictContentLength: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
_closed: true,
_header: 'GET /books HTTP/1.1\r\n' +
'Accept: application/json, text/plain, */*\r\n' +
'User-Agent: axios/1.7.0\r\n' +
'Accept-Encoding: gzip, compress, deflate, br\r\n' +
'Host: localhost:3000\r\n' +
'Connection: keep-alive\r\n' +
'\r\n',
_keepAliveTimeout: 0,
_onPendingData: [Function: nop],
agent: [Agent],
socketPath: undefined,
method: 'GET',
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
joinDuplicateHeaders: undefined,
path: '/books',
_ended: true,
res: [IncomingMessage],
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'localhost',
protocol: 'http:',
_redirectable: [Writable],
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(kBytesWritten)]: 0,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kChunkedBuffer)]: [],
[Symbol(kChunkedLength)]: 0,
[Symbol(kSocket)]: [Socket],
[Symbol(kOutHeaders)]: [Object: null prototype],
[Symbol(errored)]: null,
[Symbol(kHighWaterMark)]: 65536,
[Symbol(kRejectNonStandardBodyWrites)]: false,
[Symbol(kUniqueHeaders)]: null
},
data: '<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/app/layout.css?v=1716200344318" data-precedence="next_static/css/app/layout.css"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack.js?v=1716200344318"/><script src="/_next/static/chunks/main-app.js?v=1716200344318" async=""></script><script src="/_next/static/chunks/app-pages-internals.js" async=""></script><script src="/_next/static/chunks/app/layout.js" async=""></script><meta name="robots" content="noindex"/><title>404: This page could not be found.</title><title>XXX</title><meta name="description" content="An app to share books with friends."/><meta name="next-size-adjust"/><script src="/_next/static/chunks/polyfills.js" noModule=""></script></head><body class="__className_aaf875"><nav class="flex justify-between items-center p-4 navBar_navbar__KxV8N"><a href="/"><h1 class="text-2xl font-bold">XX</h1></a><ul class="space-x-4 navBar_menu__0oh4A"><li class="flex"></li><li class="flex"><button class="button navBar_phantomButton__Oq0Iz">login</button></li></ul><ul class="flex justify-evenly navBar_burger__dYBmF"><li><button class="">login</button></li></ul></nav><div style="font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2></div></div></div><script src="/_next/static/chunks/webpack.js?v=1716200344318" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\\"/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2\\",\\"font\\",{\\"crossOrigin\\":\\"\\",\\"type\\":\\"font/woff2\\"}]\\n2:HL[\\"/_next/static/css/app/layout.css?v=1716200344318\\",\\"style\\"]\\n0:D{\\"name\\":\\"rQ\\",\\"env\\":\\"Server\\"}\\n"])</script><script>self.__next_f.push([1,"3:I[\\"(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js\\",[\\"app-pages-internals\\",\\"static/chunks/app-pages-internals.js\\"],\\"\\"]\\n6:I[\\"(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js\\",[\\"app-pages-internals\\",\\"static/chunks/app-pages-internals.js\\"],\\"\\"]\\n7:I[\\"(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js\\",[\\"app-pages-internals\\",\\"static/chunks/app-pages-internals.js\\"],\\"\\"]\\n10:I[\\"(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js\\",[\\"app-pages-internals\\",\\"static/chunks/app-pages-internals.js\\"],\\"\\"]\\n4:D{\\"name\\":\\"\\",\\"env\\":\\"Server\\"}\\n5:D{\\"name\\":\\"NotFound\\",\\"env\\":\\"Server\\"}\\n5:[[\\"$\\",\\"title\\",null,{\\"children\\":\\"404: This page could not be found.\\"}],[\\"$\\",\\"div\\",null,{\\"style\\":{\\"fontFamily\\":\\"system-ui,\\\\\\"Segoe UI\\\\\\",Roboto,Helvetica,Arial,sans-serif,\\\\\\"Apple Color Emoji\\\\\\",\\\\\\"Segoe UI Emoji\\\\\\"\\",\\"height\\":\\"100vh\\",\\"textAlign\\":\\"center\\",\\"display\\":\\"flex\\",\\"flexDirection\\":\\"column\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},\\"children\\":[\\"$\\",\\"div\\",null,{\\"children\\":[[\\"$\\",\\"style\\",null,{\\"dangerouslySetInnerHTML\\":{\\"__html\\":\\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\\"}}],[\\"$\\",\\"h1\\",null,{\\"className\\":\\"next-error-h1\\",\\"style\\":{\\"display\\":\\"inline-block\\",\\"margin\\":\\"0 20px 0 0\\",\\"padding\\":\\"0 23px 0 0\\",\\"fontSize\\":24,\\"fontWeight\\":500,\\"verticalAlign\\":\\"top\\",\\"lineHeight\\":\\"49px\\"},\\"children\\":\\"404\\"}],[\\"$\\",\\"div\\",null,{\\"style\\":{\\"display\\":\\"inline-block\\"},\\"children\\":[\\"$\\",\\"h2\\",null,{\\"style\\":{\\"fontSize\\":14,\\"fontWeight\\":400,\\"lineHeight\\":\\"49px\\",\\"margin\\":0},\\"children\\":\\"This page could not be found.\\"}]}]]}]}]]\\n8:D{\\"name\\":\\"RootLayout\\",\\"env\\":\\"Server\\"}\\n9:D{\\"name\\":\\"NavBar\\",\\"env\\":\\"Server\\"}\\na:D{\\"name\\":\\"NotFound\\",\\"env\\":\\"Server\\"}\\nb:{\\"fontFamily\\":\\"system-ui,\\\\\\"Segoe UI\\\\\\",Roboto,Helvetica,Arial,sans-serif,\\\\\\"Apple Color Emoji\\\\\\",\\\\\\"Segoe UI Emoji\\\\\\"\\",\\"height\\":\\"100vh\\",\\"textAlign\\":\\"center\\",\\"dis"])</script><script>self.__next_f.push([1,"play\\":\\"flex\\",\\"flexDirection\\":\\"column\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"}\\nc:{\\"display\\":\\"inline-block\\",\\"margin\\":\\"0 20px 0 0\\",\\"padding\\":\\"0 23px 0 0\\",\\"fontSize\\":24,\\"fontWeight\\":500,\\"verticalAlign\\":\\"top\\",\\"lineHeight\\":\\"49px\\"}\\nd:{\\"display\\":\\"inline-block\\"}\\ne:{\\"fontSize\\":14,\\"fontWeight\\":400,\\"lineHeight\\":\\"49px\\",\\"margin\\":0}\\na:[[\\"$\\",\\"title\\",null,{\\"children\\":\\"404: This page could not be found.\\"}],[\\"$\\",\\"div\\",null,{\\"style\\":\\"$b\\",\\"children\\":[\\"$\\",\\"div\\",null,{\\"children\\":[[\\"$\\",\\"style\\",null,{\\"dangerouslySetInnerHTML\\":{\\"__html\\":\\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\\"}}],[\\"$\\",\\"h1\\",null,{\\"className\\":\\"next-error-h1\\",\\"style\\":\\"$c\\",\\"children\\":\\"404\\"}],[\\"$\\",\\"div\\",null,{\\"style\\":\\"$d\\",\\"children\\":[\\"$\\",\\"h2\\",null,{\\"style\\":\\"$e\\",\\"children\\":\\"This page could not be found.\\"}]}]]}]}]]\\n8:[\\"$\\",\\"html\\",null,{\\"lang\\":\\"en\\",\\"children\\":[\\"$\\",\\"body\\",null,{\\"className\\":\\"__className_aaf875\\",\\"children\\":[\\"$L9\\",[\\"$\\",\\"$L6\\",null,{\\"parallelRouterKey\\":\\"children\\",\\"segmentPath\\":[\\"children\\"],\\"error\\":\\"$undefined\\",\\"errorStyles\\":\\"$undefined\\",\\"errorScripts\\":\\"$undefined\\",\\"template\\":[\\"$\\",\\"$L7\\",null,{}],\\"templateStyles\\":\\"$undefined\\",\\"templateScripts\\":\\"$undefined\\",\\"notFound\\":\\"$a\\",\\"notFoundStyles\\":[],\\"styles\\":null}]]}]}]\\nf:D{\\"name\\":\\"\\",\\"env\\":\\"Server\\"}\\n11:[]\\n0:[[[\\"$\\",\\"link\\",\\"0\\",{\\"rel\\":\\"stylesheet\\",\\"href\\":\\"/_next/static/css/app/layout.css?v=1716200344318\\",\\"precedence\\":\\"next_static/css/app/layout.css\\",\\"crossOrigin\\":\\"$undefined\\"}]],[\\"$\\",\\"$L3\\",null,{\\"buildId\\":\\"development\\",\\"assetPrefix\\":\\"\\",\\"initialCanonicalUrl\\":\\"/books\\",\\"initialTree\\":[\\"\\",{\\"children\\":[\\"/_not-found\\",{\\"children\\":[\\"__PAGE__\\",{}]}]},\\"$undefined\\",\\"$undefined\\",true],\\"initialSeedData\\":[\\"\\",{\\"children\\":[\\"/_not-found\\",{\\"children\\":[\\"__PAGE__\\",{},[[\\"$L4\\",\\"$5\\"],null],null]},[\\"$\\",\\"$L6\\",null,{\\"parallelRouterKey\\":\\"children\\",\\"segmentPath\\":[\\"children\\",\\"/_not-found\\",\\"children\\"],\\"error\\":\\"$undefined\\",\\"errorStyles\\":\\"$undefined\\",\\"errorScripts\\":\\"$undefined"])</script><script>self.__next_f.push([1,"\\",\\"template\\":[\\"$\\",\\"$L7\\",null,{}],\\"templateStyles\\":\\"$undefined\\",\\"templateScripts\\":\\"$undefined\\",\\"notFound\\":\\"$undefined\\",\\"notFoundStyles\\":\\"$undefined\\",\\"styles\\":null}],null]},[\\"$8\\",null],null],\\"couldBeIntercepted\\":false,\\"initialHead\\":[[\\"$\\",\\"meta\\",null,{\\"name\\":\\"robots\\",\\"content\\":\\"noindex\\"}],\\"$Lf\\"],\\"globalErrorComponent\\":\\"$10\\",\\"missingSlots\\":\\"$W11\\"}]]\\n"])</script><script>self.__next_f.push([1,"12:I[\\"(app-pages-browser)/./node_modules/next/dist/client/link.js\\",[\\"app/layout\\",\\"static/chunks/app/layout.js\\"],\\"\\"]\\n13:I[\\"(app-pages-browser)/./app/_components/login.tsx\\",[\\"app/layout\\",\\"static/chunks/app/layout.js\\"],\\"default\\"]\\nf:[[\\"$\\",\\"meta\\",\\"0\\",{\\"name\\":\\"viewport\\",\\"content\\":\\"width=device-width, initial-scale=1\\"}],[\\"$\\",\\"meta\\",\\"1\\",{\\"charSet\\":\\"utf-8\\"}],[\\"$\\",\\"title\\",\\"2\\",{\\"children\\":\\"XXX\\"}],[\\"$\\",\\"meta\\",\\"3\\",{\\"name\\":\\"description\\",\\"content\\":\\"An app to share books with friends.\\"}],[\\"$\\",\\"meta\\",\\"4\\",{\\"name\\":\\"next-size-adjust\\"}]]\\n4:null\\n9:[\\"$\\",\\"nav\\",null,{\\"className\\":\\"flex justify-between items-center p-4 navBar_navbar__KxV8N\\",\\"children\\":[[\\"$\\",\\"$L12\\",null,{\\"href\\":\\"/\\",\\"children\\":[\\"$\\",\\"h1\\",null,{\\"className\\":\\"text-2xl font-bold\\",\\"children\\":\\"XXX\\"}]}],[[\\"$\\",\\"ul\\",null,{\\"className\\":\\"space-x-4 navBar_menu__0oh4A\\",\\"children\\":[[\\"$\\",\\"li\\",null,{\\"className\\":\\"flex\\"}],[\\"$\\",\\"li\\",null,{\\"className\\":\\"flex\\",\\"children\\":[\\"$\\",\\"$L13\\",null,{\\"text\\":\\"login\\",\\"className\\":\\"button navBar_phantomButton__Oq0Iz\\"}]}]]}],[\\"$\\",\\"ul\\",null,{\\"className\\":\\"flex justify-evenly navBar_burger__dYBmF\\",\\"children\\":[\\"$\\",\\"li\\",null,{\\"children\\":[\\"$\\",\\"$L13\\",null,{\\"text\\":\\"login\\",\\"className\\":\\"\\"}]}]}]]]}]\\n"])</script></body></html>'
export default function HomePageConnected() { const [data, setData] = useState(null); useEffect(() => { axios.get("http://localhost:3000/books") .then(response => { setData(response.data); }) .catch(error => { console.error("Error fetching data:", error); }); }, []); console.log("Data - ", data); return ( <> <h1>Welcome, you are connected</h1> </> ); }try this in react, it's the correct approach of fetching data. Also are you sure that your front is running on Port 80 and back on 3000?