I am facing difficulty in deploying my Next.js app with Firestore

Having trouble deploying my application using npm run build, Vercel, or another service. It works fine locally without showing any errors. I am using Firebase, Next.js, and TypeScript. The issue seems to be related to getStaticProps. When requesting data, it returns undefined even though I have tried multiple solutions. Any help would be greatly appreciated.

Repository: https://github.com/SrAndresF/a

Error:

Collecting page data ...AxiosError: Request failed with status code 404 data: undefined code: 'ERR_BAD_REQUEST'

I have attempted changing headers and troubleshooting a potential pre-rendering error but no success. Deployment on firehosting also failed. Initially thought it was a getStaticPaths issue, but after thorough investigation, it does not seem to be the case. The site utilizes a cookie in an environment variable, which should not be causing problems.

Should I try using Json.stringify or consider opening a Docker container? Thanks for any guidance :)

typescriptfirebasenext.jsfirebase-hosting

Answer №1

Error 404 occurs when the endpoint you are searching for is not found.

Double-check the hostname and port specified in your code to ensure accuracy. If everything seems correct, consider testing the connection using Postman before retrying with your code.

Inspect your code and locate the line in the config/index.ts file that reads:

export const server = dev ? 'http://localhost:3000' : 'http://clubdragones.vercel.app'

Verify the following:

  • Whether the dev variable has the correct value assigned
  • If is indeed the appropriate hostname to utilize

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 experiencing a challenge with Next.js where I am unable to use return within

My code was functioning properly with if-else statements in run dev, but encountered issues when running build. The if-else statements stopped working, prompting me to explore alternative ways of conditionally rendering a page. A new approach seemed promis ...

javascriptnext.js

I'm getting an error about uncaught products in a collection - can you help me understand what this means and how to

My next.js website, which fetches products from Shopify, was working flawlessly until a few months ago when it suddenly stopped building on the development server. Now, whenever I try to run the website locally, I am encountering a "Cannot read properties ...

javascriptnext.jsshopifyshopify-storefront-api

Discovering the Notification channel Id using RemoteMessage

I recently registered a notification channel in my Android app by following the GoogleSamples tutorial available at https://github.com/googlesamples/android-NotificationChannels Now, I am facing an issue with retrieving the notification channel Id from Re ...

androidfirebasefirebase-cloud-messagingandroid-8.0-oreo

Retrieve the initial token from a union, referred to as an "or list," in Typescript

Is there a way to define a generic type F with the following behavior: type X = F<'a'|'b'|'c'> should result in X being 'a'. And if type X = F<'alpha'|'beta'|'gamma'|'del ...

typescripttypescript-genericstype-inferenceunion-types

Leverage the router through the getServerSideProps method

My goal is to automatically redirect the user to the login page if their token has expired. I need to handle this in the getServerSideProps method where I make a request to the server for data. If the request is unauthorized, I want to use the useRouter ho ...

javascriptreactjsnext.jsnext-router

Encountering a syntax parsing issue while attempting to deploy Firebase Functions tutorial

My journey through the Cloud Functions tutorial has been smooth sailing until I reached the point of deploying to the cloud. That's when things took a turn for the worse - a syntax exception reared its ugly head! The culprit seems to be a lambda funct ...

node.jsfirebasenpm

Is there a way to programmatically change the page language in a Next.js App Router?

I'm currently localizing a Next.js 13 website using App Router. Most routes are accessed through [lang], making the process straightforward. However, there are a few routes where language is defined in the database and the existing links appear as /p ...

next.jsnext.js13

Is there a method in TypeScript to make an enum more dynamic by parameterizing it?

I've defined this enum in our codebase. enum EventDesc { EVENT1 = 'event 1', EVENT2 = 'event 2', EVENT3 = 'event 3' } The backend has EVENT1, EVENT2, EVENT3 as event types. On the UI, we display event 1, event 2, a ...

javascriptreactjstypescriptreact-i18next

Surprising Integration of Azure Component with OpenAI and Langchain Library in a Next.js Application Launched on AWS Amplify

Welcome to the StackOverflow community! I have developed a Next.js application that incorporates the Langchain library for chat functionality and is hosted on AWS Amplify. The app runs smoothly in my local environment but encounters issues after deploymen ...

amazon-web-servicesnext.jsaws-amplifylangchain

Using Angular material to display a list of items inside a <mat-cell> element for searching

Can I use *ngFor inside a <mat-cell> in Angular? I want to add a new column in my Material table and keep it hidden, using it only for filtering purposes... My current table setup looks like this: <ng-container matColumnDef="email"> < ...

cssangulartypescriptangular-material

Troubleshooting: Data retrieval issues in AngularFire within Ionic and Angular Application

I am encountering errors and facing issues with data retrieval in my Angular and Ionic application when using AngularFire for Firebase integration. Here is a snippet from my package.json file: "dependencies": { "@angular/common": "5.0.3", "@angul ...

angularfirebaseionic-frameworkfirebase-realtime-databaseangularfire

Encountering an issue while attempting to test geolocation functionality in the web browser

I've been working on integrating the geolocation API into my app and came across a suitable resource at the MDN website. However, when I attempted to test for the existence of the geolocation object in the browser, I encountered this error: Server Err ...

javascriptreactjsgeolocationnext.js

How do I set up middleware with async/await in NestJS?

I am currently integrating bull-arena into my NestJS application. export class AppModule { configure(consumer: MiddlewareConsumer) { const queues = this.createArenaQueues(); const arena = Arena({ queues }, { disableListen: true }); consumer. ...

javascriptnode.jstypescriptexpressnestjs

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus. One issue ...

htmlcssangulartypescriptbootstrap-4

Ensure that TypeScript compiled files are set to read-only mode

There is a suggestion on GitHub to implement a feature in tsc that would mark compiled files as readonly. However, it has been deemed not feasible and will not be pursued. As someone who tends to accidentally modify compiled files instead of the source fil ...

javascripttypescriptbuildfilesystems

Unable to store the outcomes from [ngbTypeahead] in [resultTemplate]

I'm trying to integrate ngbTypeahead into my HTML using the code snippet below <ng-template #rt let-r="result" let-t="term"> <ngb-highlight [result]="r.FirstName" [term]="t"></ngb-highlight> </ng-template> <input name ...

htmlangulartypescriptrxjsng-bootstrap

Guide to activating the isActive status on a live link within a map iteration utilizing the NEXTUI navigation bar

Check out the new NEXTUI navbar I'm using: I am having trouble setting the isActive property on the active link in my NavBar component in Next.js. I couldn't find much help on Google, so I'm hoping someone here has experience with this or k ...

javascriptreactjsnext.js

Is it possible to build a Node.js (Express) application using a combination of JavaScript and TypeScript?

Currently, I have a Node.js project (Express REST API) that is written in JavaScript. My team and I have made the decision to gradually rewrite the entire project into TypeScript. Is it possible to do this incrementally, part by part, while still being ab ...

javascriptnode.jstypescriptecmascript-6

Is your Angular2 form page experiencing reloading issues?

I am currently incorporating Angular2 into my project. I am facing an issue where the page keeps refreshing, and I'm unable to determine the cause. Below is a snippet of my form: <form> <div class="form-group"> ...

javascripttypescriptangular2-forms

Typescript error: The property 'set' is not found on type '{}'

Below is the code snippet from my store.tsx file: let store = {}; const globalStore = {}; globalStore.set = (key: string, value: string) => { store = { ...store, [key]: value }; } globalStore.get = (key) => { return store[key]; } export d ...

javascriptreactjstypescriptnext.js