Create website with Next.js and Tailwind

I learn more effieient by building real things. In my opinion, a personal website would be a great place to try new tech and practice new skills.

Since I have a business related website but I do not have a personal website, I decided to build one.

However, to gain the most knowledge during creating a personal website, I chose to share my process of building own website.

Below you can find instructions, based on my notes, of building a website with Next.js and Tailwind.

Prepare a working directory.

Create a Projects direcotory inside My Documents, located on a computer.

Note, it is possible to create a folder anywhere you want. Also, you can name it whatever you want.

Create a folder for your project.

In Projects direcotory, create a dedicated folder called tarascodes. This is a place where all files of the site will be located.

Note, it is possible to name this folder whatever other name. I chose tarascodes to match the domain name.

Open the folder in Visual Studio Code.

This is a place where all site development work will be done.

Note, you can use any other preferable code editor. I like to use Visual Studio Code for writing a code.

Enable terminal in Visual Studio Code.

To open integrated terminal, use the ctrl + ` keyboard shortcut.

Install Next.js and Tailwind CSS.

In terminal, run this command:

npx create-next-app -e with-tailwindcss .

Use development server.

You can preview changes, made to a website, using the development server on your computer:

1. Run npm run dev in terminal to start the development server on http://localhost:3000.
2. Visit http://localhost:3000 in your browser to view your website.

Note, a development version of a website is only visible to you while the development server is active on your machine.

To terminate the development server:

1. Go back to the terminal;
2. Use the following combination on your keyboard: CMD + C (MacOS) or CTRL + C (Windows);

Review installed files.

After instalation, your project will contain new folders and files.

All the pages of a website is located in the pages directory. By default, a Next.js installation, most of the time, contains a pre-made page. And often, it is a home page, functionality of which is located in the index.js file.

Learn how to create pages in a Next.js website, with a use of Tailwind.

Set site icon.

A final step is to replace a favicon, provided by a Next.js instlation.

In the root of the project:

1. Locate the public directory;
2. In this directory, replace a default favicon icon with the one you have.

If you don't have one yet, check how to create a favicon for your website.

Publish website.

The final step would be to make a website public for the audience. Personally, I use Vercel to host my Next.js website.

That's it, enjoy your new website!