NextJS: Build once and get API Endpoints URL at runtime - next.js

I am building a new NextJS app. Currently, I am in the stage of deploying the app to multiple environments like dev, qa, staging and prod. All the environments have just one change that it uses different endpoints for API.
Now, I want to create a single dockerfile but use API_ENDPOINTS_URL based on the environment variable passed during the start command.
All the examples that I am seeing online including NextJS documentation, people are using different build commands for different environments.
"build:staging": "cross-env NEXT_PUBLIC_APP_URL=staging.com next build",
"start:staging": "cross-env NEXT_PUBLIC_APP_URL=staging.com next start",
"build:prod": "cross-env NEXT_PUBLIC_APP_URL=production.com next build",
"start:prod": "cross-env NEXT_PUBLIC_APP_URL=production.com next start",
Even the example mentioned in the NextJS github example uses 3 different dockerfiles for 3 different environments which is surprising.
https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env
Is it possible that I build the app once (one docker image) and send the API_URL as part of environment variable during the start command?

Related

"firebase use" - projects out of sync between command line and when invoked from npm

I have been doing firebase functions development for a while now and was used to be able to switch the target project from the command line via firebase use test, firebase use staging etc.
In my npm package scripts in the project I also invoke the firebase tools to do things like generating a .runtimeconfig.json via:
"scripts": {
"genruntime" : "firebase functions:config:get > .runtimeconfig.json",
}
In general, this worked fine - I'd change the target project from the command line, and the same target project would be used when I ran firebase commands by npm scripts.
Over the last few days though, I've found that sometimes the target projects weren't synced as I'd set the target environment to test but the find that the npm command was getting functions from the staging environment.
My firebase tools are the same version (global via project) and it's almost as if the target project is not being shared between the global firebase tools and the the npm ones.
Has anyone else seen this issue?
I can change my npm scripts to be explicit about the project being used but this has worked in the past and I'm curious about what might have happened.

how to configure auto-build on save for nextjs apps?

I've created my first NextJS app. It's a basic default app created with [npx create-next-app]. I'm using VS Code as my IDE. When I update code on index.tsx, I need to execute [npm run build] from the cmd and then reload the browser in order for my code updates to reflect in the browser.
When I save changes to a React app component in VS Code, I don't need to run a build command. I can just refresh the browser and my changes are reflected. What is the easiest way for me to configure my NextJS app with the same behavior? Essentially eliminating the need for me to run a build command before my changes are reflected in the browser? I googled "nextjs auto build on save" but that didn't seem to return any relevant results.
I'm wondering what script you are using to run your development environment?
As a quick rundown - using a typical npx setup, there are three commands that complete the picture:
The first one is "next build", this commands compiles your project and saves it into your output folder - by default /.next.
"next start" would then take the files in the .next folder and start a server instance with them.
"next dev" however is what you want - it has auto-compilation, etc.
I would add these as a script in your package.json.
"dev": "cross-env NODE_ENV=development next dev",
"build": "cross-env NODE_ENV=production next build",
"start": "next start",

Firebase Cloud Functions. Logged errors indicate files from dist are missing

I am new to FCM.
My function works great locally as a simple nodejs module but when i deploy it. The logs are showing that some files are not there. But I can't find instructions on how to inspect what exactly got deployed. This is the dist after running build (see post build below):
"build": "tsc",
"postbuild": "cp -r src/email/emails lib/email",
Here is my dist
Errors in my app say that /email/emails/html.pug do not exist or are not in the expected location. Could that have something to do with postbuild scripts? How am I expected to troubleshoot?

Next.js project error in production build

I'm builded project with custom server, and starting with next start
If NODE_ENV = 'production' throws an error as on screen
If NODE_ENV != 'production' it works properly, but in dev environment
package.json:
"scripts": {
"lint": "next lint",
"build:next": "next build",
"build:server": "tsc --project tsconfig.server.json",
"build": "npm run build:next && npm run build:server",
"dev": "node server/index.js",
"start": "set NODE_ENV=production & node dist/server/index.js"
},
You are using a non-standard node environment value.
Why This Error Occurred
Your environment has a non-standard NODE_ENV value configured.
This may be by accident, so if you're unaware where the value is coming from, check the following:
The .env* files in your project, if present
Your ~/.bash_profile, if present
Your ~/.zshrc, if present
The greater React ecosystem treats NODE_ENV as a convention, only permitting three (3) values:
production: When your application is built with next build
development: When your application is ran with next dev
test: When your application is being tested (e.g. jest)
Setting a non-standard NODE_ENV value may cause dependencies to behave unexpectedly, or worse, break dead code elimination.
Possible Ways to Fix It
To fix this error, identify the source of the erroneous NODE_ENV value and get rid of it: Next.js automatically sets the correct value for you.
If you need the concept of different environments in your application, e.g. staging, you should use a different environment variable name like APP_ENV.
Read more about the issue here

Slow page build time in development with Next.js and TypeScript

Created a website using next.js with both backend and frontend in one project.In production it takes so much of time to load a webpage.Next version is 9.3.0.
this is my script.using of scss effects loading time
package.json
"scripts": {
"dev": "ts-node --compiler-options=\"{\\\"module\\\": \\\"commonjs\\\"}\" server/server.ts",
"build": "next build",
"start": "NODE_ENV=production 'ts-node' --compiler-options=\"{\\\"module\\\": \\\"commonjs\\\"}\" server/server.ts"
}
I guess that you are starting your production app using npm run start.
From it, it looks like you are running ts-node on production (which compiles TS on the fly).
It is better to compile server.ts on build step using typescript into dist or something like this, then run node on a js result inside dist folder.
https://github.com/vercel/next.js/issues/12797#issuecomment-629321790
https://github.com/vercel/next.js/issues/12797#issuecomment-660225689
For those curious, this was caused by Windows Defender. Windows Defender was delaying the HMR (to do a scan) because our emitted JavaScript files contained the word eval! That's why macOS was unaffected.

Resources