Ron Sims II ronsims2

## 00-README-NEXT-SPA.md

      
              5 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                ronsims2
                / 00-README-NEXT-SPA.md
            
            
              Created
              March 30, 2023 13:19
                — forked from rxs182/00-README-NEXT-SPA.md
            
              
                Next.js SPA example with dynamic client-only routing and static hosting
              
          
    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.


## array_chunk.js
// Splits an array into equal sized chunks
Array.prototype.chunk = function(pieces) {
  pieces = pieces || 2;
  var len = this.length;
  var mid = (len/pieces);
  var chunks = [];
  var start = 0;
  for(var i=0;i<pieces;i++) {
    var last = start+mid;
    if (!len%pieces >= i) {

## index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Flashcards">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flashcards</title>
<style id="jsbin-css">
.card-back {

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Adventure Engine" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
(function(w){

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Javascript object orderer]" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="foo" style="background:red;">123
</div>
	// Splits an array into equal sized chunks
	Array.prototype.chunk = function(pieces) {
	pieces = pieces \|\| 2;
	var len = this.length;
	var mid = (len/pieces);
	var chunks = [];
	var start = 0;
	for(var i=0;i<pieces;i++) {
	var last = start+mid;
	if (!len%pieces >= i) {
	<!DOCTYPE html>
	<html>
	<head>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<meta name="description" content="Flashcards">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Flashcards</title>
	<style id="jsbin-css">
	.card-back {