S. M. Abdul Aziz sayemon10

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

	// Types for the result object with discriminated union
	type Success<T> = {
	data: T;
	error: null;
	};

	type Failure<E> = {
	data: null;
	error: E;
	};

	import React from "react";
	import {
	FiBell,
	FiDownload,
	FiEdit,
	FiSave,
	FiSettings,
	FiUser,
	} from "react-icons/fi";
	import { SiAirbnb } from "react-icons/si";

	The below are all the commands you need to run -- make sure to replace the IP with your own.

	before deploying:
	make sure environment variables are correct (.env vs .env.local)
	npm build script (if you use prisma)
	"build": "prisma db push && next build"
	ssh root@62.72.26.118
	apt install npm
	npm install -g n
	n latest

	:root {
	--violation-color: red; /* used for clear issues */
	--warning-color: orange; /* used for potential issues we should look into */
	}

	/* IMAGES */

	/*
	* Lazy-Loaded Images Check
	* ====

	<div class="rotating-text">
	<p>CSS Animation is</p>
	<p>
	<span class="word alizarin">awesome.</span>
	<span class="word wisteria">beautiful.</span>
	<span class="word peter-river">creative.</span>
	<span class="word emerald">fabulous.</span>
	<span class="word sun-flower">interesting.</span>
	</p>
	</div>

S. M. Abdul Aziz sayemon10

Next.js client-only SPA example

Building