gaearon

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.

erezsob

[
  {
    "country": "Afghanistan",
    "language": "Pashto",
    "twoLetter LangCode": "ps",
    "threeLetterLangCode": "pus",
    "cultureInfoCode": "ps-AF"
  },
  {
    "country": "Afghanistan",

erezsob

{
  ".ac": "Ascension Island",
  ".ad": "Andorra",
  ".ae": "United Arab Emirates",
  ".af": "Afghanistan",
  ".ag": "Antigua and Barbuda",
  ".ai": "Anguilla",
  ".al": "Albania",
  ".am": "Armenia",
  ".an": "Netherlands Antilles",

ryanflorence

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.

martinaglv

function whatDoesItDo(val){

    return val ? 1 : 2;

}

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---