Building my personal website with Next.js and Sanity CMS

Introduction

A few weeks ago, I embarked on yet another passion project: creating a personal website. This is an idea that had been on my mind for a while but for some reason I never really pulled the trigger.

A key motivating factor in making that leap was my strong desire to create an online ressource (or some could say asset) to showcase my work. I saw this an investment in my future self, which hopefully would bring about new opportunities, professional or personal.

Now that I had made my decision, I still had to figure out how to actually execute this plan. This is a daunting step where most people tend to get stuck and eventually give up. Therefore, in this article, I want to explain how I went about setting up my personal website. I do want to say that this article may contain some technical jargon, as I chose to develop my website (almost) from scratch. Of course, I could have gone for well established no-code tools, but as a hobby web developer I think I was also excited by the technical challenge this would represent.

After doing some initial research, I quickly opted for a rather popular tech stack, which consists of Next.js and Sanity CMS.

What are Next.js and Sanity CMS

Next.js is a popular web development framework developed by Vercel, based on React JS. It enables developers to bootstrap robust, scalable, and customisable front-end interfaces for websites. It can be used with either the JavaScript or TypeScript programming languages.

Sanity, on the other hand, is a Content Management System (commonly abbreviated as CMS). In short, this is a tool which enables users to upload, store, and deliver their website content (posts, videos, images, etc.). Usually, CMS tools provide what is called an API interface so that developers can effectively “pull” this data and plug it into the correct part of the website for display.

Why Choose Next.js and Sanity CMS

Besides the fact that I had been wanting to learn React for a while, Next.js seemed like the obvious choice for a number of reasons:

1. Vercel provides some pre-built templates for a variety of use cases, ranging from building a web shop or Software-as-a-Service applications, to a portfolio website. You can checkout all of their templates right here.
2. The Next.js documentation is constantly updated and is very easy to understand, even for a hobby developer like me. Before starting a new programming project, I always make sure that my main tool is thoroughly documented. This way, I have a primary resource I can constantly go back to if I run into an issue or obstacle.
3. Next.js is particularly good for SEO optimization, which means potentially more traffic to your website! This is because web pages can be rendered on the server (server-side) instead of in the browser (client-side). Essentially, this allows search engine bots to better comprehend the structure of your website and index your web pages.
4. Next.js is extensible and can grow with my website content over time.

As for Sanity CMS, it seemed like a reasonable choice given the fact that it provides a generous free plan and a great developer experience.

Setting Up Your Development Environment

For this this tutorial, you’ll need to have the following installed on your local machine:

• A code editor. Personally, I use Visual Studio Code.
• Node.js 16.14 or later
• NPM (Node Package Manager). We will use this to create a Sanity project.

Other required tools include:

• A github account to host your application code.
• A Vercel developer account to deploy the application and make it accessible online.

Writing the Main Application Code

As setting up the application can be a somewhat convoluted process and the goal of this article is not to cover this in detail, I will point you to some of the resources I used and briefly explain the main module of the application.

I really recommend that you follow this video tutorial on youtube by freecodecamp.org, which provides a step-by-step explanation to develop your personal website with Next.js and Sanity. If you checkout the video description, you will also find a link to the tutorial GitHub repository. Use that as a reference if you ever feel lost throughout the tutorial!

If you look more carefully at the code, I want to draw you attention to 3 different components:

1. The "app" directory: this folder contains the main files implementing the front-end of the website.
   1. The "(site)" folder: the pages visible to the visitors of your website. This includes your overall website layout, home page, projects, and so on.
   2. The "(studio)" folder: the interface to create and edit the content of your website. This view is restricted to unauthorised users. If you are working on this project with other people, you will want to create new credentials and share them from your main Sanity project dashboard.
2. The "sanity" directory: here lies the sanity configuration files, sanity schemas (or main data models you want to create… a post for example has a title, publish date, author, etc.), as well as some utility functions to conveniently fetch data from the front-end of the application.

Designing Your Website (Optional)

Now that you have the base code covered, I would encourage you to reflect on the overall structure and design of your website. Ensure that these two elements resonate with your audience.

If you are unsure of where to start and are not really sure what your target audience is, my advice is start small and simple. Perhaps build an about page to introduce yourself, a projects/blog page (to showcase or write about your recent work for example), and a contact page. No need for a sophisticated main navigation.

For more elaborate designs, create a prototype design in a web design tool like Figma. Again this may be for more advanced use cases but it can be really helpful to make a rough sketch of what you want to achieve before diving deep into the code. This can save you hours of work!

Adding Content with Sanity CMS

Next you can start adding content to your website in the Sanity Studio page, the moment we have been waiting for! If you followed the aforementioned video tutorial, this page should be accessible at the following URL: www.[you-domain-name]/studio.

Deploying Your Website

The final step is to link your website code to a Vercel project. In this fashion, any time you push new code to your main git branch, this will trigger a new website deployment.

To do this, just create a new project on the Vercel platform, link your GitHub account, and import a new repository. If there are no errors in your code, all settings and environment variables have been set up correctly, your website should go live after pressing the deploy button.

Conclusion

You have just created your personal website! I hope that this article was useful and helped clear certain things out for you. Again, you may want to take this even further depending on your particular requirements and technical ability. My goal here was simply to provide an outline of what are the main points to consider in case you want to develop a personal website, like I did. I’ll see you in the next one!