Next.js + Vercel for Rapid (and free) Application Deployment
A quick guide on using Next.js and Vercel to prototype and deploy a web application in a weekend.
Over the last weekend, I sat at my desk, wondering what new random project I could use to distract myself from the pile of other random projects I haven’t managed to finish. I asked my favourite AI assistant for suggestions for things I could do to make some extra money as a side hustle. One of the suggestions both perplexed and intrigued me. Apparently, younger folk have been known to make a decent amount of money selling duckpics on a platform known as OnlyFlaps. Strange as this idea sounded, I liked the idea of sharing my favourite duckpics with the world. Not wanting to upload my pictures to some random platform, I set out on my mission to create my very own web app to share the content. This article covers using Next.js and Vercel to quickly deploy a website for free (my favourite price😊).
Firstly, What is Next.js & Vercel?
Next.js is like that cool new kid on the block that everyone wants to be friends with. It’s a powerful React framework that simplifies the process of building fast, user-friendly web applications. Think of it as a magic wand that helps you whip up static sites and server-side rendered applications with minimal fuss. It handles all the heavy lifting, so you can focus on creating awesome content and features without getting bogged down in technical mumbo-jumbo.
Vercel, on the other hand, is like the trusty sidekick that makes sure your Next.js projects shine on the big stage. It’s a cloud platform that specializes in hosting web applications. The best part? It integrates seamlessly with Next.js, offering a smooth and efficient way to deploy your website. Vercel takes care of all the behind-the-scenes stuff like scaling, security, and performance optimization. So, while you’re busy uploading those irresistible duckpics, Vercel ensures your site is always running at peak performance. Together, Next.js and Vercel are the dynamic duo you need to make your web development dreams come true, without spending a single penny. 😊
Let’s Get Started
The first step to creating our beautiful new app is to scaffold a new Next.js project. Assuming you have Node installed, go ahead and use npx to create a new project. You’ll be prompted to configure the new project. Going with the default options is all you need unless you need something specific and you know what you’re doing.
npx create-next-app@latestAfter the prompts, a new project folder will be created, and required dependencies will be installed.
At this point, you can open the project using your favourite IDE and start designing your beautiful new app. Next.js is based on React, so if you’re familiar with React, you should have no problem getting started with Next.js. Coming from an Angular background, I initially found folder-based routing to be a bit strange, but it grows on you. If you’re anything like me and need to read through the docs a hundred times (or just keep it open as a cheat sheet). Here is a link to the Next.js docs on routing. https://nextjs.org/docs/app/building-your-application/routing.
To test the app locally, run npm run dev which will start a local development server on port 3000. Visit http://localhost:3000/ to view your application.
Sharing Your Duckpics With the World
Once you’re ready to showcase your creation to the world, it’s time to host your app online for all to see. This is where the beauty and simplicity of Vercel comes in. Vercel lets you deploy a Next.js application from a Github, Bitbucket or GitLab repository with pretty much a single click (ok, fine, maybe three after GitHub 2FA and granting permissions). Honestly, the first time I gave Vercel a try, it felt as though I was cheating. No deployment pipelines? No provisioning app services? Nope, just give Vecel access to my repo and 57 seconds later, my app was available online. Anyway, I digress; let’s move on to deploying the application.
Head over to https://vercel.com/ to get started. They have made it super easy: simply click on the Start Deploying button on their home page.
You will be guided through importing the repo for your application. Since I am using GitHub, I continued to give Vercel access to the repo.
You will then be prompted to configure the project. You can leave everything as default. One thing to keep an eye on is the Framework Preset option. Usually, Vecel will detect the framework, but I’ve had it sometimes when I needed to select Next.js manually. Once you’re happy with the project settings, you can click Deploy to… well deploy your application. Isn’t it nice that they made the UI so self-explanatory?
You will then be shown the deployment progress until it’s done or fails.
Once the deployment is done, you’ll be taken to a screen indicating that your application has successfully been deployed to Vercel and some next steps, such as assigning a custom domain or enabling analytics. Clicking on the preview image will redirect you to your newly deployed app.
As simple as that, your Next.js app is now deployed and available for all to see.
The Big Reveal
I am not sure whether something was lost in translation, but I am not really sure how I am supposed to make money by posting pictures of ducks—even though they are really cute!
Vercel's generous free tier makes it very easy to deploy Next.js apps for free. I have been very impressed by the platform's performance, and I would imagine that even the free tier could serve as a good starting point for a production app.
There is a very good chance that the link shown in the above screenshot will no longer work. If you’re looking for another app deployed to Vercel, please check out my personal website: https://keaganladds.com/
Like, Share and Subscribe
If you enjoyed this article, I would really appreciate it if you shared it. If you would like to read more of my content in the future, please follow me.
