Building a Personal Website with Next.js and Hosting it Free with Vercel

In this tutorial, we will walk through the process of creating a personal website using Next.js, a powerful React framework, and deploying it for free with Vercel, a cloud platform for static sites and Serverless Functions.

Next.js offers an incredible feature set for building server-rendered or statically-generated React applications. From out-of-the-box support for features like server-side rendering and static exporting to automatic code-splitting and hot code reloading, Next.js is an excellent choice for your next web project.

Getting Started with Next.js

First, we need to set up a new Next.js project. Make sure you have Node.js and npm installed on your machine. Create a new project by running the following command in your terminal:

npx create-next-app@latest

This will create a new directory for your project. Navigate into the directory and start the development server:

cd my-app
npm run dev

You should now have a Next.js application running on your localhost.

Building Your Personal Website

The beauty of Next.js lies in its simplicity. Each page in your application corresponds to a file in the pages directory. For example, pages/index.js maps to the / route. You can create your personal website by adding more pages or modifying existing ones. Here's an example of how you can create an "About Me" page:

import React from 'react'

function About() {
return (
  <div>
    <h1>About Me</h1>
        <p>Hello, I'm Haswin Vidanage...</p>
    </div>
  )
}

export default About

Additional: Using a Next.js Template from Vercel

If you want to jumpstart your website creation, you can opt for using an existing Next.js template from Vercel's template collection. Here's how to do it:

1.Visit Vercel's template collection and select a template that suits your needs. You'll find a range of templates catering to different types of websites like blogs, portfolios, e-commerce stores, and more.

2.Once you've chosen a template, click on it and you'll be taken to a page with more details about the template. Click on the "Use This Template" button.

3.You'll then be prompted to create a new Vercel project. During this process, you'll need to connect your GitHub account (if it's not already connected), and you'll have the option to clone the template repository into your own GitHub account.

4.Name your project, and click on "Create" to finalize the creation of your project.

5.Vercel will clone the repository, install the necessary dependencies, build your project and host it on their platform. Once done, you'll be provided with a live URL of your newly deployed site.

Remember, templates are starting points. After creating a new project with a template, make sure to customize it according to your personal needs and preferences.

Deploying with Vercel

Once you're happy with your website, it's time to deploy it. Vercel, made by the creators of Next.js, is an excellent choice for deployment. First, push your code to a repository on GitHub, GitLab, or Bitbucket and create a new project on Vercel and import your repository. Then, create a new project on Vercel and import your repository. Vercel will automatically detect that you're using Next.js and set up your project accordingly. To deploy, just push your code to your repository. Vercel will automatically build and deploy your website every time you push. Your personal website is now live on the internet! Next.js and Vercel provide a powerful yet easy-to-use solution for creating and deploying your personal website.