Deploying Next (v13.2.4) with experimental appDir: true fails when deployed

proyectosynergosorg.netlify.app](Netlify App)

I got nothing fancy, just a fresh nextjs using --typescript… and appDir=true. My dependencies (package.json):

“dependencies”: {
@netlify/plugin-nextjs”: “^4.33.0”,
@types/node”: “18.15.11”,
@types/react”: “18.0.33”,
@types/react-dom”: “18.0.11”,
“next”: “13.2.4”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“typescript”: “5.0.3”
},
“devDependencies”: {
@typescript-eslint/eslint-plugin”: “^5.57.1”,
@typescript-eslint/parser”: “^5.57.1”,
“eslint”: “^8.37.0”
}

My next.config.js:

/** @type {import(‘next’).NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true,
},
}
module.exports = nextConfig

…it’s really frustrating not seeing any advance on this. Thanks in advance

Hi there, glad you found us :wave:t6: , before we can help you, we need a little more information on the issues you are facing.

First, have you looked through this resource? It is a compilation of all of our build and deploy resources. This is a good starting point.

If you have worked through those guides and are still encountering issues please share the following information:

  • what you have already tried
  • any error messages you have received in your terminal window or in the developer console

Hi SamO, I’ve been struggling a lot with this issue. I’ve followed several workarounds suggested by support members in other posts, such as:
-Revising/changing build/deploy configurations to meet both SSG and SSR.
-Using ENV variables (one to help track/isolate any possible error(s) (NETLIFY_BUILD_DEBUG = true) and the other to disable the use of @netlify/plugin-nextjs (NETLIFY_NEXT_PLUGIN_SKIP = true).

  • Disabling appDir in next-config and placing the ‘old’ fashioned /page folder…
  • Till trying to implement an edge-function with its corresponding netlify.toml to see if missing it was the ‘unexpected’ cause… and other countless ‘obscure’ tricks with no success at all…

The most positive thing I’ve achieved so far is a successful deploy BUT Page Not Found (also re-check output folder in build setup, downloaded the zip to see if static pages were generated but nothing in there)

I’m just catching up with the latest Next 13.2.4, although I’ve deployed a previous version (13.1.6) with appDir=true for other project (different repo) and everything’s worked like a charm… My local setup runs Deno and VSCode extensions, everything is up-and running when using $netlify dev, but failed when build for production…
Lastly, I decided to roll back and default to the most basic setup again (no edge-function, no nothing)… Really, I’m lost on this.

My project (Private Github repo, only basic Next (v13.2.4 so far):

https://proyectosynergosorg.netlify.app

My current build settings:

Base directory: (Not set)
Build command: yarn build
Publish directory: .next

ENV Variable:

NETLIFY_BUILD_DEBUG = true

my package.json:

{
“name”: “proyecto-synergos”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”,
“ts-lint”: “tsc --build --incremental --watch”
},
“dependencies”: {
@netlify/plugin-nextjs”: “^4.33.0”,
@types/node”: “18.15.11”,
@types/react”: “18.0.33”,
@types/react-dom”: “18.0.11”,
“eslint”: “^8.37.0”,
“netlify-cli”: “^13.2.2”,
“next”: “13.2.4”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“typescript”: “5.0.3”
},
“devDependencies”: {
@typescript-eslint/eslint-plugin”: “^5.57.1”,
@typescript-eslint/parser”: “^5.57.1”
}
}

My next-config.js:

/** @type {import(‘next’).NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true,
},
}
module.exports = nextConfig

ts-config.json:

{
“compilerOptions”: {
“target”: “es5”,
“lib”: [“dom”, “dom.iterable”, “esnext”],
“allowJs”: true,
“skipLibCheck”: true,
“strict”: true,
“forceConsistentCasingInFileNames”: true,
“noEmit”: true,
“esModuleInterop”: true,
“module”: “esnext”,
“moduleResolution”: “node”,
“resolveJsonModule”: true,
“isolatedModules”: true,
“jsx”: “preserve”,
“incremental”: true,
“plugins”: [
{
“name”: “next”
}
],
“paths”: {
“@/“: [”./”]
}
},
“include”: [“next-env.d.ts”, “/*.ts", "/.tsx", ".next/types/**/.ts”, “netlify/edge-functions/hello-world.js”, “pages/index.js”],
“exclude”: [“node_modules”]
}

My last failed deploy log:

My only ‘half-successful’ deployment (No Page Found though):

My apologize for the long reply… It’s frustrating for me, as a newbie, not having any improvement on this. Sorry…

The error block in the log:

Check out: