Next js Custom Directory with Vercel

Question

i want to ask about how to deploy next js with vercel.

Here I have the next js structure which I have changed.

• frontend (Next js Current Directory)
• node_modules
• next.config.js
• jsconfig.json
• package-lock.json
• package.json

Script in package.json.

"scripts": {
    "dev": "next frontend dev",
    "build": "next build frontend",
    "start": "next start frontend",
    "lint": "next lint frontend"
},

Script in next.config.js.

const path = require('path')

const alias = {
  '@/components': path.join(__dirname, 'frontend', 'components'),
  '@/containers': path.join(__dirname, 'frontend', 'containers'),
  '@/styles': path.join(__dirname, 'frontend', 'scss')
}

module.exports = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'frontend/scss')]
  },
  images: {
    domains: ['source.unsplash.com'],
    loader: 'imgix', // this is a hack until the bug is fixed
    path: 'https://noop/'
  },
  webpack: (config) => {
    config.resolve.alias = Object.assign(
      {},
      config.resolve.alias,
      alias
    )

    return config
  }
}

When I import to vercel and deploy only the builds are successful, Then follow with this message:

Error: The file "/vercel/path1/.next/routes-manifest.json" couldn't be found. This is normally caused by a misconfiguration in your project.

Do I have to adjust the build output? or is there a better way.

Answer 1

I solved it with override OUTPUT DIRECTORY in vercel use frontend/.next. Hope this helps others.