zal paraparata

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.)

	import { useSyncExternalStore } from 'react';

	type Selector<T, R> = (prev: T) => R;

	type UseStore<T, M> = {
	<R>(selector: Selector<T \| null, R>): R;
	} & M;

	/**
	* A helper to create stateful localStorage.

	import { createContext, useContext, useMemo, useState } from 'react';

	/**
	* A helper to generate React context.
	*
	* @returns A tuple of context provider and context hook
	*
	* @example
	* // Initialize outside component. Generic type required as context value type.
	* const [SearchBarProvider, useSearchBar] = contextCreator<string>();

	type ControlledElement =
	\| HTMLInputElement
	\| HTMLTextAreaElement
	\| HTMLSelectElement;

	/**
	* Native setter for controlled element (e.g. `input`, `textarea` and `select`) that mimic real user.
	* Reference from
	* [here](https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04)
	*/

	/**
	* Async to monitor changing state on element (e.g. <button> based on disable attribute)
	*/
	export const waitForElState = async <T extends Element \| null>(
	selector: string,
	parent: Element \| Document,
	validator: (mutations: MutationRecord[]) => boolean,
	callback: () => void,
	options?: Partial<MutationObserverInit>
	): Promise<T> => {

	const Input = React.forwardRef((props, ref) => {
	const {
	type,
	currency,
	telOptions,
	label,
	className,
	disabled = false,
	prefix,
	suffix,

	#/bin/sh

	/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" && \
	brew install --cask frappe-books

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LKZNDEV</title>

	<style>

zal paraparata

Next.js client-only SPA example

Building