DEV Community

Cover image for How to build and deploy a modern-day Next.js application

How to build and deploy a modern-day Next.js application

Andrew Baisden on July 19, 2023

Introduction Making websites is not what it used to be. Over the past ten years, it has changed from being a very straightforward area c...
Collapse
 
dev_bre profile image
Andy •

Such an informative article! Well done!

Collapse
 
andrewbaisden profile image
Andrew Baisden Livecycle •

Thanks, Andy!

Collapse
 
matanmish profile image
matanmish •

Great write up, thanks for sharing

Collapse
 
andrewbaisden profile image
Andrew Baisden Livecycle •

Thanks for reading 🙏

Collapse
 
chantal profile image
Chantal •

Thanks for sharing hey.

Collapse
 
andrewbaisden profile image
Andrew Baisden Livecycle •

Happy it helped you 🙂

Collapse
 
hsqcoollaughing profile image
HSQCoollaughing •

very good!!!

Collapse
 
andrewbaisden profile image
Andrew Baisden Livecycle •

Thanks for the feedback 😁🙏

Collapse
 
griffinfoster profile image
Griffin Foster •

Thanks for the article!

Collapse
 
topstik profile image
topstik •

I have learned many things from your post. Thanks

Collapse
 
andrewbaisden profile image
Andrew Baisden Livecycle •

Glad to hear it, glad you found it helpful!

Collapse
 
pheromona13 profile image
pheroMona13 •

Great article! I wish you had elaborated on the security aspect as well, given that you pretty much covered all aspects of the project. Specifically, I'm more interested in knowing how you implemented CSP (Content Security Policy) in the new app router, as there is no documentation available for this new implementation, and the old method of using the _document NextScript to add a nonce is no longer available.

Collapse
 
andrewbaisden profile image
Andrew Baisden Livecycle •

Thanks and I did not cover Content Security Policy however that can be done in a new article.

Collapse
 
pheromona13 profile image
pheroMona13 •

Looking forward to reading it.

Collapse
 
geraldmuvengei06 profile image
muvengei.dev • • Edited

Hi, nice article. Having come from Vue and Nuxt I decided to build my portfolio website with Nextjs, might be an overkill but it was for learning purposes.

However, the scrolling on the website is not smooth at all. Could you take a look and give me tips on how to fix it? Here is the link.

Collapse
 
andrewbaisden profile image
Andrew Baisden Livecycle •

Yeah sure however that link goes to the Netlify main website 😅

Collapse
 
geraldmuvengei06 profile image
muvengei.dev •

I’ve updated the link. Kindly take a look

Collapse
 
sip profile image
Dom Sipowicz •

It is good content for AI models to learn from :) However, I would simplify the stack a bit, so if you are reading this, please choose the tools that will make the job easier. Just because something is industry standard doesn't mean you should use it.

Collapse
 
jon_snow789 profile image
Jon Snow •

Great Post

Hey can you solve my problem

i am using mdx for markdown file and i want to embed codepen and youtube video in my mdx files
so i use mdx-embed npm package

but when i installing this package it giving me this error

mdx-embed

it will great if you can give the solution of this problem

I also tried ChatGPT and BART, but I didn't find a solution.

Collapse
 
fredrikburmester profile image
Fredrik Burmester •

Why did you choose not to use typescript?

Collapse
 
andrewbaisden profile image
Andrew Baisden Livecycle •

The article is for beginners and every developer who knows TypeScript already knows JavaScript.

Collapse
 
fredrikburmester profile image
Fredrik Burmester •

Would you not recommend TS to beginners? I would argue since TS is a superset of JS that you only have things to gain as a beginner by choosing TS. Do you agree?

Thread Thread
 
andrewbaisden profile image
Andrew Baisden Livecycle •

Hmm, I would suggest learning the basics of JavaScript first and then learning TypeScript so you can understand the problems that it now solves. TypeScript projects also require a bit more setup so IMO that would slow down the learning for beginners.

Collapse
 
ajanalkars profile image
AJANALKARS •

Hi Thank you for the awesome guide!

I was wondering, because of the NEXTAUTH_URL - if we want to proceed with Blue/Green deployment for Production, and in both the versions of the app old and new, the NEXTAUTH_URL will be pointing to canonical url of the app, so is it like a blocker or there are anyways we can handle this without manual step of changing value of the NEXTAUTH_URL.

Sorry If it's not very clear, it's Friday and I'm in hurry :)

Collapse
 
lehuyjh profile image
le-huy-jh •

why do we still run dev for production?

Collapse
 
andrewbaisden profile image
Andrew Baisden Livecycle •

Which code are you referring to do you mean the Dockerfile?