Encountered an error while attempting to export a next js blog page to static html.
My goal is to obtain the basic html structure with tailwind CSS from this blog template.
Following the instructions on the next js documentation, I made changes to module.exports in next.config.js as seen below:
/**
* @type {import('next').NextConfig}
*/
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
Previously, the configuration was:
/**
* @type {import('next/dist/next-server/server/config').NextConfig}
**/
module.exports = () => {
const plugins = [withContentlayer, withBundleAnalyzer]
return plugins.reduce((acc, next) => next(acc), {
reactStrictMode: true,
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
eslint: {
dirs: ['app', 'components', 'layouts', 'scripts'],
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'picsum.photos',
},
],
},
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
},
]
},
webpack: (config, options) => {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
})
return config
},
})
}
However, upon attempting to export, I encountered the following error:
Error occurred prerendering page "/tags/code". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Unsupported Server Component type: {...}
at em (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129087)
at /Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:140081
at Object.toJSON (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:143659)
at stringify (<anonymous>)
at eE (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132044)
at eR (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132487)
at Timeout._onTimeout (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129267)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7)
Generating static pages (21/43) [== ]
Is there a solution to modify the server component type and resolve this error? Can a static html file be exported given the current project setup?