NextJS deployed to Vercel: 404 page not found - next.js

I have a NextJS app without an integrated api that I want to deploy to Vercel. It works fine when I run it locally yarn run dev and I can also build it yarn run build without any errors. When I deploy it Vercel, however, I receive a 404 Error.
Here is my folder structure:
app/
- components
- pages
- editor
- [id].tsx
...tsx
- public
- utils
- db
api.ts
I am using NextJs 10.0.3.
Here is a link to the deployed app.
I don't have a nextjs config file. My assumption is that the error is caused by the dynamic route but I can't find my mistake. Also, no page is working when the app is deployed as opposed to only the dynamic page.
Do you have pointers on where to look next?
EDIT 1:
Here is a link to the GitHub repo.
EDIT 2:
I found an issue but don't know how to fix it.
This is how my build output looks like on Vercel:
This is how it's supposed to look like on Vercel:
Not sure why the whole _next folder is missing.

I just had this exact same issue.
I have my Next app in a sub directory. I think that might be the cause of some problems.
What worked for me was.
Make sure to pick the right sub directory. Mine had a little Next Js icon on it.
The framework preset needs to be set to Next.js.

Go to Project Settings
Change Framework preset from Other to Next.js
Redeploy the project.

Edited
Try to deploy using
now --prod --force
The --force flag will clear your build cache (in production) and force production push.
If still no working then make sure to add now.json

Also make sure to choose Next.js as Framework preset (and not other). You can find that in Project settings and under Build & Development Settings.
More here: https://vercel.com/docs/concepts/deployments/build-step

My issue was that I first attempted to deploy Vercel through a team. When I created a new Vercel project under my individual Vercel account and deployed the same code, it worked! I hope this saves someone else time because I just lost 3 hours trying to find this. I'm using Next.js as well.
If you are trying to deploy through a team, you might need to configure the team ID in your vercel.json first e.g.
{
"currentTeam": "team_ofwUZockJlL53hINUGCc1ONW"
}
ref: https://vercel.com/docs/configuration#global/config-json/current-team

Related

NextJS to ElectronJS

I have a web app in NextJS and TypeScript working fine. Now, I want to move it to ElectonJS so I can move from the web and create desktop app versions. I have tried different approaches but nothing worked for me. I also failed to find a good documentation or article about migrating NextJS to ElectronJS.
I am using nextron but I can also use some other if recommended.
Approach 1: I created a new nextron app using "yarn create nextron-app my-app basic-typescript" command as mentioned on nextron guide. Then I moved the whole code inside the renderer directory but it is showing an error when I compile. Error in Approach 1
Approach 2: I created a dummy nextron app and install all necessary dependencies there, then I copied the files, dependencies etc to my NextJS app and moved the pages folder to renderer along with the necessary files but it is also showing error.Error in Approach 2
My NextJS App
Can anyone help please?

Why are node modules working on firebase emulator but not working post deployment?

I am using intl-tel-input in my project which I installed using npm. Every thing seems to work fine when I test using Firebase emulators but it stops working post deployment.
Upon checking the Sources tab in Chrome dev tools, I can see that the module is not properly included. (Pls check images) However, I am completely unable to figure out why. Please help!
Emulator Screenshot with the Telephone Input field working fine.
Screenshot taken post deployment with the Telephone input field broken.
Source File - intlTelInput.js located at /node_modules/intl-tel-input/build/css/intlTelInput.js
Source File - intlTelInput.css located at /node_modules/intl-tel-input/build/js/intlTelInput.css
By default Firebase ignores node_modules directories when deploying.
There are a few options you could use to resolve this.
Use a build tool like Rollup or Webpack to generate bundles that include node dependencies.
Copy required node_modules files to a different directory like assets and load them from there.
Update firebase.json to not ignore node_modules on deploy. Note that this will probably greatly increase the size of deployed applications if you have any number of node packages.

SCSS/CSS doesn't load with webpack

I must update legacy code of a Rails app but i don't know why the Front is not display correctly and page loading is very slow,
I can't contact the past developers
I got the code from heroku and it works well in production but not in development environment
When i launched the app for the first time i had this error
Webpacker::Manifest::MissingEntryError
And i fix it with
yarn install
I never used webpacker before in my Rails projects, i tried many things to fix it but it doesnt work and i don't know what is the way to lauch a Rails app correctly
UPDATE
I re installed webpacker on my environment and now the server compile with webpack but i got error about a JS library
ERROR in ./app/javascript/packs/landing.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-env' from (repository path)
I can't comment yet so I have to create an answer to help you. Your CSS doesn't seem to be compiled in development environment or the CSS files are not imported somehow.
There can be several issues for that. Do you have any errors in your terminal ? Is your webpack.yml well configured for development ?
development:
<<: *default
compile: true

Best practice with VueJS (or every frontend framework) and Firebase CLI

I have a newbie question concerning the architecture of my app and what practice is better.
I have a Vue project, lets call it frontendProject (it does not really matter as my problem would have been the same with another framework) with all my file for the frontend of my website.
I recently discover all hidden feature of firebase (like function, deploy etc).
My question is simple, should i use Firebase CLI to install all functionnality like deploy, back end function etc IN the folder frontendProject OR should i create a new project dedicated for firebase and the backend, lets call it backendProject.
What is making me hesitate is the fact that i can deploy wathever is in a folder (which i pointed on dist from vue) in the firebase project, and i don't know if there will be new feature by the futur that need the firebase project to be mix with the frontend. But i'm not sure if this can mess up the project. The front end build only take the "src" folder to build if i'm right ? Which mean i'm not building useless file from firebas project when i build with vue.
If i'm not clear on any point don't hesitate to tell me.
Thanks in advance from the community
Answer from #MichaelBleigh
In root of the project set up firebase,and then put VueJs project in a web folder, then in the firebase.json, point the dist folder of vuejs so that you can deploy easily your project on firebase host

ASP.NET Core with Angular not updating changes

I have created a new project following this tutorial https://www.youtube.com/watch?v=ytDTkFJOJIE using aspnet core spa templates (angular to be specific).
So when I run "dotnet run" the first time it works fine, it runs the site as to be expected.
Now, when I commit a change, like delete the navbar and the references to it, the "main-server.js" and "main-client.js" don't update, nor does the site in the browser.
What am I doing wrong? If any more info is needed, let me know.
I was facing same issue. Below steps worked for me:
Delete all files from dist folder
run "ng build"
When the application runs, if you still don't see the changes, Empty cache and hard reload the chrome browser (hold browser refresh button for long, and select "Empty cache and hard reload")
It appears to be I had to set the environment variable. Although it might be set on launchSettings.json, you have to run this command
$Env:ASPNETCORE_ENVIRONMENT = "Development"
for it to work properly. Took me since yesterday to find this, hope it helps someone else.
For me the problem was Visual studio had checked in the .js and .js.map files for a few of my .ts components.
Visual Studio also checks in the main-client.js, vendor.js, and vendor.css files by default. Makes sure to either remove these from source control (recommended) or check them out before running.
In my case it failed to update because it was still running under IIS Express. I solved it by changing the profile from "IIS Express" to [project name] (both in the VS task bar and in the project properties under "Debug").
I too faced this problem while i executed my angular 7 with.net core app in IIS express in VS2017,
solved this by building the angular app(clientapp) in cmd by "ng build".
Then, close and reopen the application. so that VS loads the project again.
Now run the app using IIS express.
this worked for me. so give a try.
I have passed trought the same problem.
You have two options:
Delete the "dist" folder(this folder will be recreated everytime
you use 'ng-build')
Make the implementation equals the link below. This implementation
makes the application ignore the dist folder. It will only be used
at production environment.
Implementation

Resources