Build a personal site with Next.js and Tailwindcss

Why Next.js?

Next.js is an open-source javascript framework built on Node.js that allows you to create React applications that you can render on the server. It provides out-of-the-box tooling like next/image , next/router and configuration you need to build fast, SEO-friendly React apps.

Note: There is other ways to using next.js like T3 Stack .

The Stacks

• Next.js as a framework
• Tailwindcss for styling
• Headless-ui for mobile RWD nav-menu
• react-loading-skeleton made beautiful loading skeletons animated when the api data still loading
• IonIcon use in /links page media icons
• react-icon as a main icon provider
• next-sitemap create a sitemap file when the project building

Fetch Github Rest API

to fetching data from github, you have to create a github account and create token of your github account.

You use axios or fetch to fetching api from github.
Example of fetching github user repository data with fetch.

import React from "react";

const tokenkey = "GITHUB_TOKENKEY";

export default function Fetchgithubapi() {
  const [data, setData] = React.useState(null);
  const [isLoading, setLoading] = React.useState(false);
  const loadingdisplay = (
    <div>
      <p>Loading...</p>
    </div>
  );
  useEffect(() => {
    setLoading(true);
    fetch("https://api.github.com/users/GITHUB_USERNAM/repos", {
      headers: {
        Authorization: { tokenkey },
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);
  if (isLoading) return loadingdisplay;
  if (!data) return loadingdisplay;
  return (
    <div>
      {data.map((repo) => (
        <div>
          <p>{repo.name}</p>
        </div>
      ))}
    </div>
  );
}

next-sitemap

The most easy way to do this is create a file called next-sitemap.config.js in the root floder of project and insert these few lines of code.

const siteUrl = 'http://www.eliaschen.dev/'
module.exports = { siteUrl }

SEO

SEO also is a very important key for your personal website, It’s about how people can search your website in the search engine.

To make your SEO better you can add robots.txt in /public floder, and add your website to Google Search Console .

• robots.txt (insert these code to robots.txt under the /public floder)

User-agent: *
Allow: /
Sitemap: https://example.com/sitemap-0.xml

• Google Search Console Tools
  It’s very simple to add your website to Google Search Console.
• Visit Google Search Console
• Create a new resource
• Go to Produce an index > Site map add your sitemap with url

Deploy

I deploy my website with vercel.