Next.js 14 App Directory on Netlify
I am deploying on Netlify CLI of https://hbh-distributors.netlify.app/
I had uploaded it successfully once but based on my website, it returns a jsx-styled error. I wanted to fix that so I tried few different things like upgrading my plugin-next-js for netlify and modify my netlify.toml.
My frontend project is on a subdirectory frontend/
and I have this netlify.toml
on the base directory:
[build]
command = "npm run build"
base = "frontend"
publish = ".next"
[build.environment]
NEXT_USE_NETLIFY_EDGE = "true"
[[plugins]]
package = "@netlify/plugin-nextjs"
and when I try to publish that with the CLI, it returns error:
Edge Functions bundling
────────────────────────────────────────────────────────────────
Packaging Edge Functions from .netlify\edge-functions directory:
- ___netlify-edge-handler-src-middleware
(Edge Functions bundling completed in 2.2s)
@netlify/plugin-nextjs (onPostBuild event)
────────────────────────────────────────────────────────────────
@netlify/plugin-nextjs (onEnd event)
────────────────────────────────────────────────────────────────
(@netlify/plugin-nextjs onEnd completed in 10ms)
Save updated config
────────────────────────────────────────────────────────────────
(options.onEnd completed in 3ms)
Plugin "@netlify/plugin-nextjs" failed
────────────────────────────────────────────────────────────────
Error message
Error: Failed publishing static content
Plugin details
Package: @netlify/plugin-nextjs
Version: 5.1.2
Repository: git+https://github.com/netlify/next-runtime-minimal.git
npm link: https://www.npmjs.com/package/@netlify/plugin-nextjs
Report issues: https://github.com/netlify/next-runtime-minimal/issues
Error location
In "onPostBuild" event in "@netlify/plugin-nextjs" from netlify.toml and package.json
Resolved config
build:
base: C:\Users\Jabez\Documents\Works\clients\hbh-client\hbh\frontend
command: npm run build
commandOrigin: config
environment:
- NEXT_USE_NETLIFY_EDGE
publish: C:\Users\Jabez\Documents\Works\clients\hbh-client\hbh\frontend\.next
publishOrigin: config
functionsDirectory: C:\Users\Jabez\Documents\Works\clients\hbh-client\hbh\frontend\netlify\functions
plugins:
- inputs: {}
origin: config
package: '@netlify/plugin-nextjs'
redirects:
- from: /_next/image
query:
q: ':quality'
url: ':url'
w: ':width'
status: 200
to: /.netlify/images?url=:url&w=:width&q=:quality
- from: /_ipx/*
query:
q: ':quality'
url: ':url'
w: ':width'
status: 200
to: /.netlify/images?url=:url&w=:width&q=:quality
redirectsOrigin: inline
I have also nothing setup on my next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default nextConfig;
And this is my package.json
on the frontend/
directory:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"date-fns": "^3.6.0",
"jose": "^5.2.3",
"js-cookie": "^3.0.5",
"lucide-react": "^0.361.0",
"next": "14.1.4",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.2.2",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@netlify/plugin-nextjs": "^5.1.2",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
Thank you so much!