So I'm trying to dockerize Next.js 13 app router with Nginx for production deployment. To do so, I use static export in my Next.js app. However, as written in the docs (https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features), I can't use dynamic server functions such as rewrites, middleware, etc. For the rewrites
there's a solution already which is by using Nginx rewrite function. However, I need to use other functions such as middleware and headers.
Example case on using headers
is when trying to fetch data on server component:
const getPosts = async (query: { take: number; lastCursor?: string }): Promise<IGetPostsResponse> => {
const host = headers().get('host');
const url = new URL(`http://${host}/api/public/posts`);
url.searchParams.append('take', query.take.toString());
if (query.lastCursor) {
url.searchParams.append('lastCursor', query.lastCursor);
}
const res = await fetch(url);
if (res.status === 404) return notFound();
if (!res.ok) throw new Error('Something went wrong!');
return res.json();
};
above getPosts
function called in server component and it needs full url to successfully call the api. That's why I use headers
to get the host/base url since the base url can be different in dev and prod.
've been browsing around and still not yet find any example on static export deployment Next.js 13 app dir with these server functions.
Is there any solution or alternatives on handling this server functions in deploying containerized/dockerized Next.js 13 app? or maybe there's a best practice to deploy Next.js 13 app with Nginx using Docker?
Been struggling on deploying dockerized Next.js app with Nginx ...