Using Vercel for a Next.js Custom Directory Configuration

Seeking guidance on deploying Next.js with Vercel, I have made changes to the structure of my Next.js project:

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

Contents of package.json script:

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

Contents of next.config.js script:

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',
    path: 'https://noop/'
  },
  webpack: (config) => {
    config.resolve.alias = Object.assign(
      {},
      config.resolve.alias,
      alias
    )

    return config
  }
}

After importing to Vercel, the build is successful. However, the message received is:

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

Should I modify the build output, or is there a more optimal solution?

Answer №1

My solution involved modifying the OUTPUT DIRECTORY parameter in vercel to frontend/.next. Hopefully, this tip will assist others with similar challenges.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble locating an external Javascript file in a Node.JS/Express app with Jade template?

In my Node.JS/Express app, I am using the Jade template engine. The issue arises when trying to reference a server-side Javascript file named common_routines. Despite placing the Javascript file in the directory above my views directory and referencing it ...

Retrieve information from an external source and subsequently make alterations to it

If a certain external site returns a string like "cost is 10$", is it possible for me to display it as "price:10$" on my own website using only Javascript? The external site could be something like Facebook.com. My website, of course, belongs to me. Hello ...

SimpleLightBox refuses to function

Having trouble getting SimpleLightBox to work properly? It seems like when you click on an image, it opens as a regular image on a blank page. I've added the JS and CSS files correctly (I double-checked in the source code) and included the HTML and JS ...

Dealing with the hAxis number/string dilemma in Google Charts (Working with Jquery ajax JSON data)

My Objective I am attempting to display data from a MySQL database in a "ComboChart" using Google Charts. To achieve this, I followed a tutorial, made some modifications, and ended up with the code provided at the bottom of this post. Current Behavior T ...

Making use of JavaScript's XMLHttpRequest() function allows for seamless

My issue revolves around my use of multiple XMLHttpRequest() requests in order to retrieve the value (miniTable) returned by the TableRow() function. Strangely, while I get the desired value when using alert() at the end of the TableRow() function, the T ...

Using the typeof operator to test a Typescript array being passed as an object

I have a puzzling query about this particular code snippet. It goes like this: export function parseSomething(someList: string[]): string[] { someList.forEach((someField: string) => { console.log(typeof someField) }) Despite passing a s ...

Dynamic TypeScript class constructor argument typing determined by user input

I am working on creating a dynamic class that can adapt its argument properties based on a certain value. To illustrate this concept, let's consider a simple example: Imagine I have a class called Customizer, and depending on the value of the mode pr ...

Why does NPM not install the most recent version of the package during an update?

After installing nodemon using the command 'npm i nodemon', I always get the latest version, which is currently 2.0.2. However, if I decide to install an older version using another command, such as npm i someolderemail, and then try to update ...

The Transform feature doesn't seem to be functioning as expected within the Bootstrap

I was experimenting with creating a simple transform transition animation using css and js, so I wrote the following code: (test page) <!DOCTYPE html> <html> <head> <style type="text/css"> *{ ...

Retrieve all colors from the style attribute

I'm on the hunt for a method to extract all CSS colors from a website. Currently, I have been able to manage internal and external stylesheets by utilizing document.styleSheets. However, my issue lies in the fact that any styles directly assigned to a ...

What is the most effective method for retrieving a key and value from an Axios response object?

I currently have a Mongoose schema set up to store key:value pairs in a mixed type array, represented like this: Mongoose const budgetSchema = new Schema({ earnings: Number, expenses: [mongoose.Schema.Types.Mixed] }); budget:{ earning:1000, exp ...

When a link is clicked, submit a form and send it to several email addresses simultaneously

My form has been styled using the uniform jQuery plugin. Instead of using an input type submit for submitting the form, I have utilized a link and added some effects to it to prevent it from being formatted with uniform. <form> <ul> ...

Comparing a series of smaller strings to a larger string for testing purposes

My website has an array filled with bot names. Whenever a user or bot visits the site, I retrieve the user-agent and want to check if any of the values in my array are present in it. var bots = [ "twitterbot", "linkedinbot", "facebookexternalhit", ...

Filtering Key Presses in Quasar: A Comprehensive Guide

Seeking Assistance I am looking to integrate an "Arabic keyboard input filtering" using the onkeyup and onkeypress events similar to the example provided in this link. <input type="text" name="searchBox" value="" placeholder="ب ...

The contents of the div do not display when the button is pressed except in jsfiddle

I have written a script that triggers the appearance of a div where users can adjust the time settings for a timer. The functionality works perfectly on JSFiddle, with the div displaying as intended. However, when tested on other online IDEs such as Coding ...

Issue with Material-UI Nested Checkbox causing parent DOM to not update upon selection changes

Currently, I am integrating a nested checkbox feature from a working example into my application. The functionality of the checkboxes covers seven different scenarios: - Scenario - No children, no parent selected - Select the parent -> select both pa ...

Break up a list into separate paragraphs and style each word using individual CSS

I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list. Check out this image for reference In the example i ...

What is the best way to place a JavaScript or jQuery variable within an HTML tag?

Suppose we have a variable called var sticky_element = ".menu"; and then there's this line of code: jQuery(sticky_element).wrapInner('<div class="menu-inner"></div>'); How do we replace the menu in class="menu-inner" with the ...

Ways to troubleshoot and fix the problem of encountering an "Internal Server Error" when sending emails with nodeMailer in node.js

When attempting to send a confirmation email using nodemailer, I encountered an internet server error in production when allowing insecure apps for Gmail accounts, although it works fine locally. Any suggestions on how to resolve this issue? router.post(& ...

The type 'ReadableStream<any>' cannot be assigned to the parameter type 'ReadableStream'

Is there a way to convert a Blob into a Readable format? import {Readable} from 'stream'; const data: Blob = new Blob( ); const myReadable: Readable = (new Readable()).wrap(data.stream()); myReadable.pipe(ext); Encountering an error: ERROR in s ...