How to apply env variables to apiconfig when deploying Next.js to AWS Amplify?
Unanswered
Devon Rex posted this in #help-forum
Devon RexOP
I am using amplify only for front end hosting via github and CI/CD to auto-deploy when branches are updated.
Since I don't keep the variables in the repo, I can't put them in the build commands.
Is the best practice to just prefix all the variables in the Amplify console and then import them into the apiconfig, for example?
Since I don't keep the variables in the repo, I can't put them in the build commands.
Is the best practice to just prefix all the variables in the Amplify console and then import them into the apiconfig, for example?
54 Replies
linesofcode
Hey hey
Do you add the variables in your amplify environment variables?
Via the ui?
If so just add them in this fashion (or via the amplify cli if it can do that)
And then they’ll be available in your nextjs app
That’s how I do it on amplify and it works just fine
Very similar to how one would handle it on vercel
In amplify each deploy branch can have its own set of variables too
Btw for server side variables in amplify you need to explicitly reference them in your amplify.yml
Otherwise the nextjs app won’t have them available
That’s not the case for client side variables
However
Weird quirk with amplify 🙃
Devon RexOP
That's the question - do i keep them in the amplify console and import them via variables named NEXT_PUBLIC_VARIABLE in the console?
I only need them on the front-end, so no worries about backend variables.
linesofcode
Yep yep
Exactly
Devon RexOP
I deploy SAM templates and then the front-end communicates with them. I don't use the actual amplify cli to deploy.
Got it, thanks!
linesofcode
Mmm im not too familiar with SAM
But try that approach out
And let me know if it doesn’t work for you
Devon RexOP
It's just deploying the backend separately - like cloudformation
linesofcode
Ah got it
Btw you may be interested in SST
Amplify kinda sucks to be honest lol
Devon RexOP
Which part? I don't disagree but I only use it for the easy CI/CD integration.
linesofcode
And doesn’t exactly support nextjs app directory features
(They are all marked as experimental and you need to do extra config on top of it)
Devon RexOP
Yes true, luckily I'm using pages for now - in the future I may need another FE solution.
linesofcode
With that said I use amplify in production so….
It’s totally usable
But when compared with a system like vercel or sst
The shortcomings become evident fast
Just from a developer experience
Devon RexOP
But Vercel is just built on AWS and it's more expensive.
linesofcode
Yep
Just about everything is built on top of aws
Devon RexOP
One ecosystem to rule them all.
😄
linesofcode
And take half the internet down when there’s an outage lol
Good luck figuring out what you need!
Devon RexOP
Thanks again
linesofcode
No problem.
Devon RexOP
Last thing, sorry. So are the identity pool ids, etc (everythingin apiconfig) not sensitive?
because it's all exposed there
but everyone removes those when sharing info for debugging
linesofcode
I’m not sure sorry
Just an id on its own is rarely an issue
Only if they can use that id to access public resources that they should otherwise not have access to
Or be able to perform attacks on your system by exploiting the knowledge of an id
It’s really dependent on what you’re doing
🤷ðŸ»
California pilchard
Hello, Im having a 500 error with /api routes from my NextJS 14 app with Amplify. Some forum talk about env variable for this issue. Im new with amplify, Ive added my env variable with the ui but should I do something else ?