Antony Sande antosan

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

Don't like Next? Here's how to do the same in Gatsby.

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

	import { setupWorker, rest } from "msw";

	export const ExampleStory = () => {
	...
	};

	ExampleStory.decorators = [
	(Story) => {
	const [ready, setReady] = React.useState(false);

	# .github/workflows/test.yaml
	name: test
	on: push
	jobs:
	test:
	runs-on: ubuntu-latest
	# Service containers to run with `container-job`
	services:
	# Label used to access the service container
	postgres:

	import React from 'react';
	import debounce from 'utils/debounce';

	class EmailInput extends React.Component {
	checkEmail = value => {
	// only check if the field passes Yup email validation first
	if (
	!this.props.form.errors[this.props.name].includes(
	'invalid' /* or whatever your error message is*/
	)

	- Open Automator
	- File -> New -> Service
	- Change "Service Receives" to "files or folders" in "Finder"
	- Add a "Run Shell Script" action
	- Change "Pass input" to "as arguments"
	- Paste the following in the shell script box: open -n -b "com.microsoft.VSCode" --args "$*"
	- Save it as something like "Open in Visual Studio Code"


	/**
	* Utility function to check if a gravatar exists for a given email or id
	* @param int\|string\|object $id_or_email A user ID, email address, or comment object
	* @return bool if the gravatar exists or not
	*/

	function validate_gravatar($id_or_email) {
	//id or email code borrowed from wp-includes/pluggable.php
	$email = '';