If you need to build a portal, a CMS or something related, you’ll probably think of WordPress first. It’s indeed a good solution, but depending on the case, you’ll need something fresh, perhaps even built from scratch. If that’s your case, building with Next.js + GraphQL + Vercel could be a good option. Let’s explore this idea!
Alternative ways to build a portal
Using a generic GraphQL API to deal not just with the CMS data but with all generic data in your application might need is a more efficient approach. With that, other applications can eventually use the same API.
For the database level, a good solution is the famous PostgreSQL.
If you need a relational database with sane structured data, why not go with the “The World’s Most Advanced Open Source Relational Database”?
But what about the consuming interface? Now, enter Next.js into the picture. If your main main goal is to build a performance-first website, bet on Next.js and its promises could be a good approach.
The deploy
Technically speaking and from the developer point of view, Next.js is great, but we may face some difficulties integrating everything, specially when adapting the Next.js application to run well in a Cloud like AWS, Azure, Google Cloud.
A nice approach is Server-side rendering (SSR). With that, your view layer will be communicating with the GraphQL API.
export async function getServerSideProps(context) {
return {
props: {},
}
}
The problem with this technique is that this is not as fast, as performant, as normally needed. With Next.js there is something even better: using static pages.
export async function getStaticProps(context) {
return {
props: {},
}
}
When you use getStaticProps, Next.js will pre-render the page at build time using the props returned by getStaticProps.
That’s great for performance!
To get all things working we have to combine getStaticProps and getStaticPaths.
export async function getStaticPaths() {
return {
paths: [
{ params: { … } }
],
fallback: true or false
};
}
Working with Next.js
This kind of application will probably have dynamic routes.
In Next.js we need to define a list of paths that have to be rendered as HTML at build time.
If you export an async function called getStaticPaths from a page which uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.
If you have millions of pages being generated for each build, that’s not feasible, so we can’t generate all pages at build time, but Next.js has this covered.
With getStaticPaths and getStaticProps we can limit how many pages we want to generate at build time.
Having a “fallback”
But what happens with pages that haven’t been generated yet when someone tries to access it? If fallback is true, then the behavior of getStaticProps will change. The paths that have not been generated at build time will not result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request to such a path.
In the background, Next.js will statically generate the requested path HTML and JSON. This includes running getStaticProps.
In short, with this approach. we can have as many pages as we want pre-generated and in cache and when a new page is requested, Next.js will load all data necessary and cache it.
Building with Vercel
Now that we have the perfect combination of features on the Next.js side there is just one piece missing: Vercel.
Vercel combines the best developer experience with an obsessive focus on end-user performance. It also offers automated deploys via Git (including different branches), a powerful interface and CLI.
Using the Edge Network
Another killer feature from Vercel is its Edge Network. The Vercel Edge Network sits in-between the internet and the application’s deployments. It can become a de-facto CDN.
This layer is responsible for routing requests to the correct Serverless Function or Static File output of our builds. Vercel caches content at the edge in order to serve data as fast as possible.
Getting your application up and running
Of course, there are some extra steps you’ll need to do, and a lot of research, but in the end, using this guide you’ll get a nice application up and running. And, more importantly, running in a scalable way.
All infrastructure is automated, the developer experience is great and new features can be developed, merged and deployed smoothly.
Vercel and Next.js are great for this kind of application, but first, you need to know what you want and what are the possible approaches to achieve that. Then, you can move on to the advantages of combining the platform and the framework.
Note: This article was written by our partners over at BrazilJS and is being reproduced here with their authorization.
…
🌎 VANHACK, LinkedIn Talent Awards Winner 2021, is Canada’s most respected recruitment company. With more than 1,900 hires, VanHack is on a mission of increasing diversity and creating a borderless world. So if you are a software developer looking for a job abroad, in Canada, the US, or Europe, join VanHack today. 100% free for candidates, plus you will get all the preparation you need when your profile is shortlisted.
Visit our platform to become one of our many VanHackers hired abroad 😃
For success stories and tips about working in Canada, check out the VanHack Podcast 🎧
Be part of VanHack’s Learning Hub 📒
Check out the next VanHack event 🗓