A summary of what I have been discovering in my intent to make this web more attractive and I wish I’d knew before.

Keep reading if you want to take the interesting pill…

so that having a website (almost) for free won’t secret anymore.

Stepping Out From Google Photos

Almost FREE? - You will just need a domain (if you want)

We will do the following:

  1. Select a NextJS Theme
  2. Host the NextJS Website for Free
  3. (Optional) - Get a domain

Next.js as a Static Site Generator

Next.js is commonly recognized for its server-side rendering capabilities, but NextJS is also a powerful tool for static site generation (SSG).

This framework from Vercel allows developers to create pre-rendered, static HTML websites using React.

What How
Host for Free Firebase / Cloudflare Pages / GitHub Pages
Themes FREE NextJS Themes
Language JavaScript (React)
Backed up by Vercel + Open Source

What sets Next.js apart is its ability to combine the best of both world.

The dynamic capabilities of server-side processes and the performance benefits of static sites.

Next.js is an open-source React framework for creating websites and applications.

The best of all? Thanks to NextJS ability to act as SSG - you can create cool websites even if you are not a web developer.

The proof? - I am not dev and you are reading this.

The NextJS Project

So, if we are going to build a cool website, we need to leverage on some open source code.

In this case, it will be thanks to NEXT.JS.

Next.js, a popular React framework for building fast & scalable web apps.

Why Choosing Next.js for SSG?

Next.js offers several features that make it an attractive choice for static site generation.

More reasons to go for NextJS 🔥
  • Automatic Page Optimization: Next.js automatically optimizes pages by statically generating them as HTML at build time.
  • Incremental Static Regeneration (ISR): Update static content after deployment without needing to rebuild the entire site.
  • Hybrid Pages: You can use both static generation and server-side rendering in the same project, choosing the most appropriate method for each page.
  • Rich Ecosystem: Leverage the entire React ecosystem, including CSS-in-JS libraries, TypeScript support, and powerful data fetching libraries.

NextJS provides both SSR and static site generation

Getting Started with Next.js

To begin with Next.js SSG, you’ll need to not be afraid of some code.

You will get a basic understanding of React as you tweak some F/OSS themes.

Here’s a quick guide to set up a Next.js project for static generation:

  1. Set Up Your Development Environment:
    • Make sure Node.js is installed on your computer.
    • If you want to create your own NextJS Theme
    • Create a new Next.js project by running npx create-next-app your-project-name.
    • Navigate into your project directory with cd your-project-name.
How to Install a specific NodeJS version 🔥 
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.bashrc
nvm install 20.12.2
nvm use 20.12.2

node --version
npm --v
  1. Find a NextJS Theme

Remeber, NextJS is a framework done by Vercel.

So you can find many of them here

Feel free to look on github for open source Themes for NextJS that you can just tweak.

These are some samples that I liked.

You can check the quality of the theme with pagesdev

Some interesting Themes?

Startup 😎

Image Centered Blog 🎥
Other Image Blog - https://github.com/prismicio-community/nextjs-starter-prismic-blog

Photo Gallery 📷
Image Centered Blog 🖼️
Awsome Docs 📑
Portfolio - Links 📥

  1. Developing Your Site:

    • Use the pages directory to add new pages. Each JavaScript or TypeScript file in this directory automatically becomes a route based on its file name.
    • Utilize static generation by exporting getStaticProps (for fetching data at build time) and getStaticPaths (for dynamic routes) in your page components.

  2. Building and Deploying:

    • Run next build to build the static version of your site.
    • Normally, it files will go to ./dist
    • Deploy your site by uploading the output directory to any static hosting provider like Vercel, Netlify, or even an AWS S3 bucket.

You just need to know - these 3 commands

npm install
npm run dev
npm run build

And if you want to go further…

Enhancement of NextJS Description
SEO Optimization Use Next.js’s built-in support for SEO enhancements, like meta tags and structured data, to improve your site’s visibility.
Performance Optimization Implement image optimization with Next.js’s Image component and leverage automatic code splitting.
Dynamic Features Incorporate dynamic elements using client-side JavaScript or API calls that run in the browser.

Where to Host Your Next.js Website?

Hosting basically means…which PC is going to be serving your awsome NextJS site once you have finished building.

Because you wont have your PC ON all they long. Probably.

We can let the hosting task to a third party.

And the good things is that NextJS SSG sites are not huge, and dont need many compute resources.

So, we have some FREE Hosting options for NextJS.

NextJS 💟 Cloudflare Pages

This is FAST. I am getting ~15ms when I ping my website using Cloudflare Pages 🚀

Other Options for Free NextJS Hosting

  • Host your Next.js SSG on Firebase for scalable hosting and integrated services like authentication, database, and analytics.

    • How to use Firebase to Host a NextJS Static Web
    • Next.js with Firebase Pros and Cons
      • Pros:
        • Scalable hosting with integrated services.
        • Easy setup and management.
      • Cons:
        • Limited customization options.
        • May not be suitable for high traffic websites.

  • Easily host your Next.js SSG on GitHub Pages, perfect for static sites with seamless integration with your GitHub repository.

    • How to use GitHub Pages to Host a NextJS Static Web
    • Next.js with GitHub Pages Pros and Cons
      • Pros:
        • Free hosting with seamless integration with GitHub.
        • Good for personal projects or documentation sites.
      • Cons:
        • Limited to static sites only.
        • Limited customization options.
  • If these platforms stop being generous, you can always self-host NextJS ✅:
    • HTTPs with an Nginx server
    • From any old laptop at home with Cloudflare Tunnels
    • These options gives you full control and is a great choice if you prefer fully open-source solutions and more control 💡

Conclusion

Next.js is more than just a tool for server-side rendering; it’s a robust solution for building static sites that are fast, scalable, and dynamic.

With features like Incremental Static Regeneration and the ability to create hybrid sites, Next.js offers flexibility and performance that are hard to match with other SSGs.

If you need help with HTML - Consider the Writy F/OSS Project.

Generate beautiful HTML files without writing any code.

Where to get a Domain

Remember that when you are hosting with Cloudflare, Firebase or Github Pages - you will have a free subdomain to get started.

That makes having your first website free with NextJS.

But if you want to have your custom domain name, you can always try:

Registrar Description Website
Cloudflare Offers domain registration with DNS management and additional security features. Cloudflare Domains
Porkbun Provides affordable domain registration with a user-friendly interface. Porkbun
Squarespace Primarily known for website building, also offers domain registration integrated with their platform. Squarespace Domains
GoDaddy One of the largest domain registrars with a wide range of services, including hosting and website building. GoDaddy
Namecheap Offers competitive pricing and a variety of domain management features. Namecheap

None of them are sponsoring me and you can find more alternatives

FAQ

Can Next.js handle high traffic on static sites? 😏
Yes, static sites generated with Next.js are highly scalable and can handle high levels of traffic, as the majority of resources are static and can be served directly from a CDN.
How does ISR differ from traditional SSG?
Incremental Static Regeneration allows pages to be re-generated in the background as traffic comes in, which means your site can be updated without full redeployments and without sacrificing performance.

JS Package Management

JavaScript package management is like having a well-stocked toolbox for your coding projects.

It’s all about efficiently managing the external libraries and tools your project relies on.

This means you spend less time hunting down and manually installing each piece, and more time actually building your ideas.

JavaScript Package Management: npm, Yarn, and Bun Explained 😮

npm (Node Package Manager):

  • Description: npm is the default package manager for Node.js and JavaScript.
  • Pros:
    • Huge package ecosystem: npm hosts the largest registry of JavaScript packages.
    • Integrated with Node.js: npm comes bundled with Node.js, making it readily available.
    • Easy to use: npm offers simple commands for package installation, publishing, and management.
  • Cons:
    • Inconsistent dependency resolution: npm’s dependency resolution algorithm can lead to dependency conflicts.
    • Slower performance: npm’s installation process can be slower compared to other package managers.

Yarn:

  • Description: Yarn is a fast, reliable, and secure package manager for JavaScript.
  • Pros:
    • Improved performance: Yarn is designed to be faster than npm, especially for large projects.
    • Deterministic installs: Yarn uses a lockfile to ensure consistent dependency resolution across different environments.
    • Offline support: Yarn caches packages locally, allowing for offline installation.
  • Cons:
    • Smaller ecosystem: Yarn’s package ecosystem is not as extensive as npm’s.
    • Less integrated with Node.js: Yarn requires additional setup compared to npm, as it is not bundled with Node.js by default.

Bun:

  • Description: Bun is a modern JavaScript runtime, bundler, and package manager rolled into one.
  • Pros:
    • Speedy performance: Bun is designed for high speed, outperforming other package managers in most benchmarks.
    • All-in-one solution: Combines package management, bundling, and execution environment, simplifying the development process.
    • Modern design: Embraces the latest JavaScript features and optimizations for better efficiency.
  • Cons:
    • Newer on the scene: As a newer tool, it might have fewer resources and a smaller community compared to npm and Yarn.
    • Compatibility issues: May encounter issues with older packages not yet optimized for Bun.

Bun is a fast Javascript package manager (and runtime and bundler…All in one)

By understanding the differences between npm, Yarn and Bun, you can choose the package manager that best suits your project’s requirements and workflow.

This is where the magic of collaboration knows no bounds. When code is shared freely, we can stand on the shoulders of giants and build upon the work of others.

How to install JS Package Managers

npm Installation 🔭 and Version Check

Install npm:

sudo apt update
sudo apt install npm
npm --version
Yarn Installation and Version Check

How to Install Yarn: Yarn requires Node.js to be installed. You can install it using the NodeSource repository:

sudo apt update
sudo apt install yarn
yarn --version

From the repository:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
sudo apt update

sudo apt install yarn
yarn --version
Bun Installation 🚀 and Version Check

Bun is an all-in-one toolkit for JavaScript and TypeScript apps. It ships as a single executable called bun.

Install Bun:

curl -fsSL https://bun.sh/install | bash

bun --version

Diagrams with JS

I love the mindmap diagram!

Comparing SSG and SSR

The choice between SSGs and SSR depends on the specific requirements of your project, including your SEO goals, content frequency, and user interaction needs.

In some cases, a hybrid approach using both SSGs and SSR may be the most suitable solution to leverage the benefits of both methods.

The choice is yours 🤘

  • 🔍 SEO Benefits of Static Site Generators (SSGs):

    • Static site generators (SSGs) are advantageous for SEO due to their provision of static HTML pages.
    • Search engine bots can effortlessly crawl and index these pages, leading to faster indexing and potentially better search visibility.
    • SSGs are ideal for content-focused websites or blogs where the content doesn’t change frequently.

  • 🔄 Dynamic Content Rendering with Server-Side Rendering (SSR):

    • Server-side rendering (SSR) excels in rendering dynamic content in real-time, ensuring a more interactive and personalized user experience.
    • With SSR, the server generates HTML for each request, allowing for dynamic data to be loaded dynamically.
    • This approach is perfect for applications or websites that require user-specific data or frequent updates.

Other FREE SSG’s

You can do awsome websites with Astro!

How to monitor my NextJS Website Status

Upptime is the open-source uptime monitor and status page, powered entirely by GitHub.

If you are having a site for sometime already, it might be good to look if all referenced links are working from time to time.

But, manually…is not an option - Fortunately we can use LinkChecker Project with Python.

#podman run --rm -it ghcr.io/linkchecker/linkchecker:latest --verbose https://fossengineer.com > linkchecker_output.txt

docker run --rm -it -u $(id -u):$(id -g) ghcr.io/linkchecker/linkchecker:latest --verbose https://www.example.com

Or with the python Package:

pip3 install linkchecker

Check links in web documents or full websites

You will get a report with what’s link working and what not when it comes to Links in your Site.

Choosing Brand colors with F/OSS

Icons for NextJS

npm i bootstrap-icons

Official open source SVG icon library for Bootstrap.

⚡️ Icon Explorer with Instant searching, powered by Iconify

npm install --save-dev @iconify-icon/react

Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!

And more! Font Awesome works with Require.js, Rails with Turbolink, and jQuery!

add this to your css

@import "../../node_modules/light-icons/dist/light-icon.css";

Handpicked collection of premium & light-wighted icons as font

Simply beautiful open-source icons

FavIcons for NextJS

  1. Go to the theme folder
  2. Add a /static folder
  3. Add the files generated with the website

You can Add a ChatBot to a NextJS Site

Forget about old school Contact Forms - Use a F/OSS ChatBot in your NextJS Site:

How to use AI to Generate a NextJS Website

Draw a mockup and generate html for it

How to use NextJS with a CMS

⚡TurboStrapi: The fast lane to kickstarting Strapi & Next.js projects.

git clone https://github.com/sawden/turbostrapi.git

cd turbostrapi
yarn install #npm install wont make it

How to have Stories on your NextJS Website

Amazing job!!

How to have animated logo in your NextJS Website

How to Add Payments to NextJS

Node.js library for the Stripe API.

With the embedded Stripe Checkout:

How to use Stripe JS Library ⏬ 
npm i stripe

Then, we will see this new entry at package.json:

  "dependencies": {
    "stripe": "^16.2.0",
  },

Add the following script tag to your Astro layout file (e.g., src/layouts/MainLayout.astro or in Base.layout, as per your theme) in the section:

<script src="https://js.stripe.com/v3/"></script>

Here’s an example of what the StripeForm.astro component might look like:

---
// StripeForm.astro
---

How to Add Authentication to NextJS

Logto: Free Open Source Identity Infrastructure for Developers

https://youtube.com/watch?v=h-p2L8z6XEM

Interesting libraries/components for NextJS

Most modern mobile touch slider with hardware accelerated transitions

TW-Elements

𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎

PhotoSwipe

JavaScript image gallery and lightbox

JavaScript image gallery for mobile and desktop, modular, framework independent

Managing Packages for SSGs

For SSGs that are using Node (like Astro), you can get to know the Docs of any npm package that uses typescript: https://tsdocs.dev/

NPM Packages? Yes, and you can manage them with

NPM ⏬
PNPM ⏬

Some themes will work only with this package manager… https://github.com/exylons/astrozinc

git clone https://github.com/exylons/astrozinc
cd .astrozinc

npm install -g pnpm

# Install dependencies
pnpm install

# Start the dev server
pnpm dev

pnpm build
Yarn - another package manager ⏬
Bun with an Example ⏬

Really cool Portfolio template made with Nuxt 3, Nuxt Content and TailwindCSS

bun install
bun dev #dev server
bun generate #static proy
bun start #prod server