As you might have already guessed if you have been reading my articles lately, I have a hunch that a website using the Hive blockchain as a content management system, but with a speed and SEO optimized user interface, might be a "best of both worlds" scenario for many of us.
This is the start of a series of posts where I go over how and what I am building, and the things I learn along the way.
NextJS is a new stack for me, which is well outside of my comfort zone, so don't expect this to necessarily "best practice" but what I have working right now.
Why NextJS?
Ordinarily, websites I would build would be WordPress/PHP or they would be Python, but as mentioned, speed is a big deal in the modern web.
Google actually has a set of tools and criteria they called "Core Web Vitals", and unlike most of these measurements, they are not just looking at turnaround time for the server to answer the request, but trying to measure the user experience, which means the page can't just be loaded, it has to have rendered quickly.
Many solutions to this problem have been offered and are in use, but a lot of them have chosen speed over other needs. I don't think there is any point in having a super-fast website that Google ignores unless you are building a walled garden, such as an intranet.
So as well as being fast to respond, it has to expose the content to search engine spiders so that your site is indexed.
It also can't be a pain in the butt to work with, which many of these systems turn out to be. For example, there is no point in having a super fast and SEO optimized website if it takes 15 minutes to rebuild any time you find a typo!
In my research I found NextJS to be the best of the bunch for when your end-to-end stack is based around NodeJS.
This isn't set in stone, because as I am both a Python and a WordPress advocate, I am also very much looking at Gatsby due to the flexibility in where your data can be sourced from.
Staging and Deploying
Another plus for NextJS is there is an excellent, and free, fully integerated hosting platform from the people behind NextJS called Vercel:
They allow you to set up a Git repo and pull from that repo any time you want to deploy.
You can have staging URLs and your own custom domains for your live site too - this is super useful when you don't want to break your published site any time you make a change.
Right now I have a Staging branch on my repo which is pulled into my preview URL, then I do a curl command to force the staging site to pull a fresh copy:
When I am happy with my changes, I can then tell Vercel that I want to deploy staging to published site on my domain:
Getting Started with NextJS
You will need NodeJS installed, naturally.
Next, as is traditional, you can start from a template site using the following command:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
What I find easier though when getting started is to get Vercel to do the heavy lifting!
Click New Project:
Then choose your template:
You can then name your repo and your project will be set up!
The final step should look like this ...
After cloning your repo (git clone https://github.com/...) onto your development computer, you can run the built-in web server to see how it looks.
NextJS Site Structure
Your basic NextJS site will be split into:
- Static files in Public (eg. graphics)
- Style sheets (global and per-module)
- Pages (eg. your homepage is index.js but you can create about.js for your about page)
- API (a special page that represents the backend data layer for retrieving your content)
All very straightforward at this point.
Creating a Page
We can create a new About page thusly:
const about = () => {
return (
<div>
<h1>About</h1>
</div>
)
}
export default about
As you can see, using the React style, we simply output some HTML-looking code as a return statement to the object we called about.
Next Up
This is fine for a static brochure-style website, but we want our site to be a front-end for our Hive content!
So next we will look at making the site data-driven, and using the API functionality ...