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.