Build a personal site with Next.js and Tailwindcss
Tags: nextjs, webdev, tailwindcss, react
Published: 2023-01-01 13:51:20

### 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`](https://create.t3.gg/) .

### The Stacks
- [Next.js](https://nextjs.org/) as a framework
- [Tailwindcss](https://tailwindcss.com/) for styling
- [Headless-ui](https://headlessui.com/) for mobile RWD nav-menu
- [react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton) made beautiful loading skeletons animated when the api data still loading
- [IonIcon](https://ionic.io/ionicons) use in `/links` page media icons
- [react-icon](https://react-icons.github.io/react-icons/) as a main icon provider
- [next-sitemap](https://www.npmjs.com/package/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.
```jsx
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.

```js
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](https://search.google.com/search-console/about) .
- robots.txt (insert these code to `robots.txt` under the `/public` floder)
```robot
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.
1. Visit [Google Search Console](https://search.google.com/search-console/about)
2. Create a new resource
3. Go to `Produce an index > Site map` add your sitemap with url

### Deploy 
I deploy my website with [vercel](https://vercel.com).

### Conclusion
Overall, If you want to build your own site, I would suggest using Next.js or checkout the [scrose code](https://github.com/chenelias/eliaschen.dev) of my [personal site](https://www.eliaschen.dev/) on [github](https://github.com/chenelias/eliaschen.dev).

⚡Thanks for reading, see you in the next blog.