Build a personal site with Next.js and Tailwindcss

#nextjs #webdev #tailwindcss #react

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