Why I Chose Next.js for My Portfolio Site

After exploring many new technologies for my portfolio site, I found Next.js was the perfect solution for my use case. In this post, I'll outline the positive aspects of Next.js that are not possible out of the box with some alternatives, in particular with React-based options like Create React App.

In the past, I've used Create React App, but not offering server-side rendering as a default was a downside for SEO. There is evidence that some search engines can now crawl client-side Javascript websites. Google's John Mueller had this to say in a tweet about the topic:

It's not always perfect, and certainly not easy, but for some sites it can work well, even if you rely on client-side-rendering (just JS, no server-side-rendering). YMMV :)

— 🫧 johnmu of switzerland (personal) 🫧 (@JohnMu) July 16, 2018

But... when it comes to SEO, I don't like to see how my mileage may vary (YMMV). I wanted to be 100% sure this site is accessible for a bot to scan. With that in mind, here are my favorite things about Next.js.

Server-Side Rendering

Next.js offers multiple solutions for server-side rendering. Depending on your needs, you can generate static files, fetch data server side and dynamically generate static files, or incrementally generate static pages after initially building a project.

For my needs, I used static generation during the build process to cover the Contact page, and I used Incremental Static Regeneration to generate static HTML files for new blog posts. This combo makes the website super snappy, dynamic, and SEO friendly.

Automatic Code Splitting

Each page gets a unique bundle that only contains what is needed. After the static page loads, the content for other pages is preloaded, and client-side rendering takes over. Clicking on a link leads to the preloaded content being used to render the new view on the front-end, which is nearly instant.

Simple Page-Based Routing

Next.js uses a "pages" folder to control routing. For instance...

• pages/about.js ⭢ https://www.joeysikes.com/about
• pages/contact.js ⭢ https://www.joeysikes.com/contact

This makes creating new pages with routes straightforward. Routes also support dynamic properties that can be used to load dynamic content. I use dynamic routing to power the blog route. The folder structure looks like this...

• pages/blog.js ⭢ https://www.joeysikes.com/blog
• pages/blog/[slug].js⭢ https://www.joeysikes.com/blog/first-post

In the above example, "first post" is passed into the [slug.js] page as a variable called "slug." I then query my CMS for that dynamic slug to load content.

API Routing is Simple Too

Folder-based API routing makes adding an API simple.

Like the page-based example, any files put into the "/api" folder are automatically bundled into serverless Node functions. Take a look at this example...

• pages/api/contact.js ⭢ https://www.joeysikes.com/api/contact

Inside contact.js, you use a standard Node function format with a request and response object that looks something like this:

// sample.js
const Sample = async (req, res) => {
    return res.status(200).json({ 'A sample response from /pages/api/sample' });
};

export default Sample;

I used this feature to power my contact page API along with NodeMailer. I had a working API endpoint up in minutes.

CSS in JS, and CSS Modules

I've typically shied away from CSS in JS, but it's nice to have the option.

For now, I created a global SCSS file that I import to the top-level component of my site. This file contains universal rules for typography, grids, etc.

Then, I mostly rely on component-based SCSS Modules. This automatically name spaces the class names while allowing me to use SCSS variables to maintain consistency between components.

In Conclusion

React with Next.js made creating this site not only more straightforward, but I also had more fun working on it. I have SSR, code splitting, static exporting for simple pages, page-based routing (even for API endpoints!), and scoped CSS. Plus, there are so many more features to explore.

Deploying my project onto a server was just as easy as with Vercel, which comes from the creators of Next.js. I integrated Vercel with my Github, so production deployments are kicked off after a merge into the main branch. Vercel even handled the creation of my SSL certs for free—now that's convenient.

I encourage you to check out the documentation for Next.js and also check out the Vercel platform. Both can accelerate and improve your next project.