Creating a Typescript-enabled custom server for a production-ready Next.js app

Recently, I set up a custom express server for developing an API and hosting static content generated by next.js. However, when attempting to build for production, I encountered the following error message:

Error: Could not locate a production build in the specified 'path/to/project/.next' directory. Please ensure that you run 'next build' before launching the production server.

Answer №1

To ensure proper functioning, the next.js project and custom server must be built separately.

  1. Begin by removing any existing .next and dist folders
  2. In the root of the project, create a new tsconfig file named tsconfig.server.json that extends the primary tsconfig.json configuration. This setup assumes the custom server resides in a directory called ./server, and you desire the output to be stored in ./dist.
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "target": "es2017",
    "isolatedModules": false,
    "noEmit": false
  },
  "include": ["server"]
}
  1. Update your scripts within the package.json file
"scripts": {
    "build:server": "tsc --project tsconfig.server.json",
    "build:next": "next build",
    "build": "npm run build:next && npm run build:server",
    "start:prod": "NODE_ENV=production node dist/server/index.js",
    ...
}

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

I'm having trouble with the calculator, unable to identify the issue (Typescript)

I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...

Search through an array of objects and assign a new value

I am facing a challenge with an array of objects structured as shown below: [ { "e_id": "1", "total": 0 }, { "e_id": "3", "total": 0 } ] My objecti ...

Angular validation is malfunctioning for fields that have names ending with periods

Currently in the process of generating dynamic input fields <input class="form-control-lg form-control" placeholder="{{data.DisplayName}}" formControlName="{{data.labelName}}" type="text" maxlength="13" ...

Resolving the Error: "Type 'Customer | undefined' is not compatible with type 'Customer'" in Angular

I encountered an issue with the following code: ... export class ListCustomersComponent implements OnInit { customers: Array<Customer> = []; showCustomer?: Customer; isSelected: boolean = false; deletedCustomer?: Customer; returnedMessa ...

Angular provides the capability to sort through data using various criteria

I have received an array of objects in a specific format from the server, which may contain more than 2 objects. [ {processId : 1, processName : "process1", country : "germany", companyCode:"IB" , companyHiringType:"FRE", masterClauses:[ {cl ...

After pushing to history in React, the rendered component fails to display on the screen

I am in the process of developing a React application. Here are the dependencies I am currently using: "react": "^17.0.2", "react-dom": "^17.0.2", "react-helmet": "^6.1.0", "react-router" ...

Guide on bringing in Javascript file into your Ionic/Angular application

Within my Ionic 2 application, I have incorporated three.js along with a PLYLoader extension for three.js (accessible here: https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/PLYLoader.js) Integrating three.js is straightforward by includi ...

In TypeScript Next.js 14 APP, object literals are limited to declaring existing properties

I encountered an error in my typescript next.js 14 APP. I need assistance resolving this issue, which states: Object literal may only specify known properties, and 'productPackages' does not exist in type '(Without<ProductCreateInput, Pr ...

The InAppBrowser seems to have trouble loading pages with cookies when I attempt to navigate back using the hardware back button

In my Ionic/Angular application, I utilize the InAppBrowser plugin to access a web application for my company. The InAppBrowser generally functions properly; however, there is an issue with a cookie within the web application that controls filters for cert ...

Implementing filters and pagination in getserversideprops for next js deployment

I'm currently working on implementing filter and pagination features for my product list page. However, I am unsure how to pass values to getServerSideProps in the same way that we fetch data in useEffect and use the updated values as dependencies in ...

Collaborate and reuse Typescript code across various Node projects

Imagine we have a project structured like this: webapps ProjectA SomeClass.ts Package.json ProjectB SomeClass.ts Package.json Common LoggingClass.ts Package.json The Common "LoggingClass" needs to import a module from NPM. Let's say that ...

Use TypeScript to cast the retrieved object from the local storage

const [savedHistory, setSavedHistory] = useState(localStorage.getItem('history') || {}); I'm facing an issue in TypeScript where it doesn't recognize the type of 'history' once I fetch it from localStorage. How can I reassign ...

Exploring Typescript: A guide to iterating through a Nodelist of HTML elements and retrieving their values

I'm struggling to retrieve values from a Nodelist of input elements. Can anyone help me out? let subtitleElements = document.querySelectorAll( '.add-article__form-subtitle' ); ...

Using Keyof on a type combined with Record<string, unknown> results in missing properties and can cause errors when paired with Omit<T, K>

I encountered a situation that has left me unsure whether it is an actual issue or simply a misunderstanding on my part. Upon reviewing this code snippet: type Props = { foo: string bar: string } & Record<string, unknown> // Using Record< ...

Avoiding the creation of fields that have not been inputted in TypeGraphQL

@Resolver() export class NameCardCreateResolver { @Mutation(() => BaseMutationResponse) async namecardCreate( @Arg("chosenSNSUrls", () => SNSInput) { facebook, twitter, instagram, blog, youtube }: SNSInput, @Arg("owner& ...

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what c ...

State hook variable not being properly updated within a functional component

After updating the name of an ingredient, I am looking to save this data as an ingredient with the new name: from "Milk" to "Cow's milk". I've included simple steps (1,2,3) in comments to outline the process briefly, but for clarification, assum ...

how to adjust the width of a window in React components

When attempting to adjust a number based on the window width in React, I encountered an issue where the width is only being set according to the first IF statement. Could there be something wrong with my code? Take a look below: const hasWindow = typeof ...

The Next.js API endpoint is struggling to process cross-domain POST requests

Dealing with a POST request in my NextJS application has been challenging. This particular post request is originating from a different domain. To address this issue, I included a receptor.ts file in the /pages/api directory: import { NextApiRequest, Next ...

The entire screen is filled with a background image, but there's an odd margin that seems

I created a div to use an image as a background that covers the entire screen. However, there seems to be a mysterious margin that I can't seem to remove. After examining the code, I couldn't find any indication that I had configured these margi ...