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
 
griffinfoster profile image
Griffin Foster

Thanks for the article!

Collapse
 
dev_bre profile image
Andy

Such an informative article! Well done!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks, Andy!

Collapse
 
hsqcoollaughing profile image
HSQCoollaughing

very good!!!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks for the feedback 😁🙏

Collapse
 
chantal profile image
Chantal

Thanks for sharing hey.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Happy it helped you 🙂

Collapse
 
matanmish profile image
matanmish

Great write up, thanks for sharing

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks for reading 🙏

Collapse
 
topstik profile image
topstik

I have learned many things from your post. Thanks

Collapse
 
andrewbaisden profile image
Andrew Baisden

Glad to hear it, glad you found it helpful!

Collapse
 
geraldmuvengei06 profile image
Gerald • 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

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

Collapse
 
geraldmuvengei06 profile image
Gerald

I’ve updated the link. Kindly take a look

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

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
 
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
 
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
 
fredrikburmester profile image
Fredrik Burmester

Why did you choose not to use typescript?

Collapse
 
andrewbaisden profile image
Andrew Baisden

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

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

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