gaunt pecan
i have a same issue with https://stackoverflow.com/questions/78547999/need-advice-on-next-js-14-and-external-api-fetch-logic
https://example/apiRoute became /apiRoute of the internal url
help
const response = await fetch('https://my-api.something/route', { //became requesting to localhost:3000/route
headers: {
'authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json; charset=utf8'
},
});
ebon gustBOT
Hi @gaunt pecan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the knowledge sources, it seems like you're experiencing an issue with fetch requests in Next.js.
Next.js extends the native fetch Web API to allow you to configure the caching and revalidating behavior for each fetch request on the server. You can use fetch in Server Components, Route Handlers, and Server Actions. Here's an example of how to use it:
export default async function Page() {
const data = await fetch('<https://api.example.com/...'>).then((res) =>
res.json()
)
return '...'
}
By default, fetch requests retrieve fresh data. Using it will cause a whole route to be dynamically rendered and data will not be cached. You can cache fetch requests by setting the cache option to force-cache. This means data will be cached, and the component will be statically rendered.
fetch('<https://...',> { cache: 'force-cache' })
(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#fetch-api))
However, if you're experiencing issues with fetch requests in serverless functions, it might be due to the use of a third-party fetch library. Vercel recommends replacing the third-party fetch library with the native fetch API that Next.js provides to fix such issues (Source: Vercel Docs (https://vercel.com/docs/workflow-collaboration/conformance/rules/NEXTJS_USE_NATIVE_FETCH#how-to-fix)).
If the issue persists, it might be helpful to share the code in a shared library or module to avoid another network request. You can then import this shared logic and call directly within your getServerSideProps function, avoiding additional network requests entirely (Source: Vercel Docs (https://vercel.com/docs/workflow-collaboration/conformance/rules/NEXTJS_NO_FETCH_IN_SERVER_PROPS#how-to-fix)).
gaunt pecan
@ebon gust i mean fetching external api being changed to internal url
ebon gustBOT
Let me check the knowledge base for you. One moment! :books:
It seems like you're experiencing an issue where fetch requests to an external API are being redirected to an internal URL. This could be due to the configuration of rewrites in your next.config.js file.
In Next.js, you can use the rewrites function in your next.config.js file to rewrite an internal path to an external URL. Here's an example:
module.exports = {
async rewrites() {
return [
{
source: '/api/:path*',
destination: '<https://example.com/api/:path*',> // Matched parameters can be used in the destination
},
]
},
}
In this example, a request to '/api/some-path' in your Next.js application would be rewritten to 'https://example.com/api/some-path'.
If you're using trailingSlash: true, you also need to insert a trailing slash in the source parameter. If the destination server is also expecting a trailing slash it should be included in the destination parameter as well.
module.exports = {
trailingSlash: true,
async rewrites() {
return [
{
source: '/api/:path*/',
destination: '<https://example.com/api/:path*/',>
},
]
},
}
(Source: Next.js Docs (https://nextjs.org/docs/app/api-reference/next-config-js/rewrites#rewriting-to-an-external-url))
next.config.js file to ensure that your rewrites are configured correctly. If the issue persists, it might be due to a conflict between your API routes and your rewrites configuration. In this case, you might need to adjust your rewrites configuration or migrate your API routes to the new Route Handlers in the app directory (Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#api-routes)).
gaunt pecan
@ebon gust i am using static exports
ebon gustBOT
Let me check the knowledge base for you. One moment! :books:
If you're using static exports in Next.js, it's important to note that certain features are not supported. For instance, dynamic server functions and internationalized routing do not integrate with static exports as they do not leverage the Next.js routing layer.
When you're using static exports, Next.js generates an HTML file per route. This can be configured in your next.config.js file. Here's an example:
const nextConfig = {
output: 'export',
// Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
// trailingSlash: true,
// Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
// skipTrailingSlashRedirect: true,
// Optional: Change the output directory `out` -> `dist`
// distDir: 'dist',
}
module.exports = nextConfig
After running next build, Next.js will produce an out folder which contains the HTML/CSS/JS assets for your application.
However, if you're trying to fetch data from an external API, you should be able to do so without the fetch request being redirected to an internal URL. The fetch request should look something like this:
export default async function Page() {
const res = await fetch('<https://api.example.com/...'>)
const data = await res.json()
return <main>...</main>
}
In this example, <https://api.example.com/...> should be replaced with the URL of the external API you're trying to fetch data from.
If you're still experiencing issues, it might be due to the configuration of your server or hosting environment. Next.js static exports can be deployed and hosted on any web server that can serve HTML/CSS/JS static assets, including tools like AWS S3, Nginx, or Apache. You might need to check the configuration of your server or hosting environment to ensure that it's not redirecting fetch requests to an internal URL.
Sources: