[
  {
    "path": ".gitignore",
    "content": "node_modules\n"
  },
  {
    "path": "with-context/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "with-context/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "with-context/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "with-context/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "with-context/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "with-context/package.json",
    "content": "{\n  \"name\": \"with-use-state\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"next\": \"12.1.0\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^17.0.21\",\n    \"@types/react\": \"^17.0.40\",\n    \"eslint\": \"8.11.0\",\n    \"eslint-config-next\": \"12.1.0\",\n    \"typescript\": \"^4.6.2\"\n  }\n}\n"
  },
  {
    "path": "with-context/pages/_app.js",
    "content": "import \"../styles/globals.css\";\nimport { PokemonProvider } from \"../src/store\";\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    <PokemonProvider pokemon={pageProps.pokemon}>\n      <Component {...pageProps} />\n    </PokemonProvider>\n  );\n}\n\nexport default MyApp;\n"
  },
  {
    "path": "with-context/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "with-context/pages/index.tsx",
    "content": "import Head from \"next/head\";\nimport styles from \"../styles/Home.module.css\";\n\nimport { usePokemon } from \"../src/store\";\nexport { getServerSideProps } from \"../src/store\";\n\nexport default function Home() {\n  const { pokemon, filter, setFilter } = usePokemon();\n\n  return (\n    <div className={styles.main}>\n      <Head>\n        <title>Pokemon</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <div>\n        <input\n          type=\"text\"\n          value={filter}\n          onChange={(e) => setFilter(e.target.value)}\n          className={styles.search}\n        />\n      </div>\n      <div className={styles.container}>\n        {pokemon.slice(0, 20).map((p) => (\n          <div key={p.id} className={styles.image}>\n            <img\n              alt={p.name}\n              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}\n            />\n            <h2>{p.name}</h2>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "with-context/src/store.tsx",
    "content": "import { useState, useMemo, createContext, useContext } from \"react\";\n\ninterface Pokemon {\n  id: number;\n  name: string;\n  image: string;\n}\n\nexport async function getServerSideProps() {\n  const resp = await fetch(\n    \"https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json\"\n  );\n  return {\n    props: {\n      pokemon: await resp.json(),\n    },\n  };\n}\n\nconst usePokemonController = (pokemon: Pokemon[]) => {\n  const [filter, setFilter] = useState(\"\");\n\n  const filteredPokemon = useMemo(\n    () =>\n      pokemon.filter((p) =>\n        p.name.toLowerCase().includes(filter.toLowerCase())\n      ),\n    [filter, pokemon]\n  );\n\n  return {\n    filter,\n    setFilter,\n    pokemon: filteredPokemon,\n  };\n};\n\nconst PokemonContext = createContext<ReturnType<typeof usePokemonController>>({\n  filter: \"\",\n  setFilter: () => {},\n  pokemon: [],\n});\n\nexport const PokemonProvider = ({ pokemon, children }) => (\n  <PokemonContext.Provider value={usePokemonController(pokemon)}>\n    {children}\n  </PokemonContext.Provider>\n);\n\nexport const usePokemon = () => useContext(PokemonContext);\n"
  },
  {
    "path": "with-context/styles/Home.module.css",
    "content": ".main {\n  padding: 1rem;\n}\n\n.image img {\n  max-height: 200px;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  row-gap: 1rem;\n  column-gap: 1rem;\n}\n\n.search {\n  width: 100%;\n  border: 1px solid #aaa;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1.2rem;\n  margin-bottom: 1rem;\n}"
  },
  {
    "path": "with-context/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "with-context/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"incremental\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "with-jotai/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "with-jotai/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "with-jotai/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "with-jotai/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "with-jotai/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "with-jotai/package.json",
    "content": "{\n  \"name\": \"with-use-state\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"jotai\": \"^1.6.1\",\n    \"next\": \"12.1.0\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^17.0.21\",\n    \"@types/react\": \"^17.0.40\",\n    \"eslint\": \"8.11.0\",\n    \"eslint-config-next\": \"12.1.0\",\n    \"typescript\": \"^4.6.2\"\n  }\n}\n"
  },
  {
    "path": "with-jotai/pages/_app.js",
    "content": "import '../styles/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n  return <Component {...pageProps} />\n}\n\nexport default MyApp\n"
  },
  {
    "path": "with-jotai/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "with-jotai/pages/index.tsx",
    "content": "import { useState, useMemo } from \"react\";\nimport Head from \"next/head\";\nimport { atom, useAtom } from \"jotai\";\nimport { useHydrateAtoms } from \"jotai/utils\";\n\nimport styles from \"../styles/Home.module.css\";\n\ninterface Pokemon {\n  id: number;\n  name: string;\n  image: string;\n}\n\nconst pokemonAtom = atom<Pokemon[]>([]);\nconst filterAtom = atom(\"\");\nconst filteredPokemon = atom((get) =>\n  get(pokemonAtom).filter((pokemon) =>\n    pokemon.name.toLowerCase().includes(get(filterAtom).toLowerCase())\n  )\n);\n\nexport async function getServerSideProps() {\n  const resp = await fetch(\n    \"https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json\"\n  );\n  return {\n    props: {\n      initialPokemon: await resp.json(),\n    },\n  };\n}\n\nexport default function Home({\n  initialPokemon,\n}: {\n  initialPokemon: Pokemon[];\n}) {\n  useHydrateAtoms([[pokemonAtom, initialPokemon]] as const);\n\n  const [pokemon] = useAtom(filteredPokemon);\n  const [filter, setFilter] = useAtom(filterAtom);\n\n  return (\n    <div className={styles.main}>\n      <Head>\n        <title>Pokemon</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <div>\n        <input\n          type=\"text\"\n          value={filter}\n          onChange={(e) => setFilter(e.target.value)}\n          className={styles.search}\n        />\n      </div>\n      <div className={styles.container}>\n        {pokemon.slice(0, 20).map((p) => (\n          <div key={p.id} className={styles.image}>\n            <img\n              alt={p.name}\n              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}\n            />\n            <h2>{p.name}</h2>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "with-jotai/styles/Home.module.css",
    "content": ".main {\n  padding: 1rem;\n}\n\n.image img {\n  max-height: 200px;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  row-gap: 1rem;\n  column-gap: 1rem;\n}\n\n.search {\n  width: 100%;\n  border: 1px solid #aaa;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1.2rem;\n  margin-bottom: 1rem;\n}"
  },
  {
    "path": "with-jotai/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "with-jotai/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"incremental\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "with-mobx/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "with-mobx/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "with-mobx/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "with-mobx/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "with-mobx/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "with-mobx/package.json",
    "content": "{\n  \"name\": \"with-mobx\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"mobx\": \"^6.4.2\",\n    \"mobx-react-lite\": \"^3.3.0\",\n    \"next\": \"12.1.0\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^17.0.21\",\n    \"@types/react\": \"^17.0.40\",\n    \"eslint\": \"8.10.0\",\n    \"eslint-config-next\": \"12.1.0\",\n    \"typescript\": \"^4.6.2\"\n  }\n}\n"
  },
  {
    "path": "with-mobx/pages/_app.js",
    "content": "import '../styles/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n  return <Component {...pageProps} />\n}\n\nexport default MyApp\n"
  },
  {
    "path": "with-mobx/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "with-mobx/pages/index.tsx",
    "content": "/* eslint-disable @next/next/no-img-element */\nimport { useEffect } from \"react\";\nimport Head from \"next/head\";\nimport styles from \"../styles/Home.module.css\";\nimport store, { type Pokemon } from \"../src/store\";\nimport { observer } from \"mobx-react-lite\";\n\nexport async function getServerSideProps() {\n  const resp = await fetch(\n    \"https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json\"\n  );\n\n  store.pokemon = await resp.json();\n\n  return {\n    props: {\n      initialPokemon: store.pokemon,\n    },\n  };\n}\n\nfunction Home({ initialPokemon }: { initialPokemon: Pokemon[] }) {\n  useEffect(() => {\n    store.pokemon = initialPokemon;\n  }, [initialPokemon]);\n\n  return (\n    <div className={styles.main}>\n      <Head>\n        <title>Pokemon</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <div>\n        <input\n          type=\"text\"\n          value={store.filter}\n          onChange={(e) => (store.filter = e.target.value)}\n          className={styles.search}\n        />\n      </div>\n      <div className={styles.container}>\n        {store.filteredPokemon.slice(0, 20).map((p) => (\n          <div key={p.id} className={styles.image}>\n            <img\n              alt={p.name}\n              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}\n            />\n            <h2>{p.name}</h2>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default observer(Home);\n"
  },
  {
    "path": "with-mobx/src/store.ts",
    "content": "import { computed, makeObservable, observable } from \"mobx\";\n\nexport interface Pokemon {\n  id: number;\n  name: string;\n  image: string;\n}\n\nclass PokemonStore {\n  pokemon: Pokemon[] = [];\n  filter: string = \"\";\n\n  constructor() {\n    makeObservable(this, {\n      pokemon: observable,\n      filter: observable,\n      filteredPokemon: computed,\n    });\n  }\n\n  setPokemon(pokemon: Pokemon[]) {\n    this.pokemon = pokemon;\n  }\n\n  get filteredPokemon() {\n    return this.pokemon.filter(({ name }) =>\n      name.toLowerCase().includes(this.filter.toLowerCase())\n    );\n  }\n}\n\nconst store = new PokemonStore();\n\nexport default store;\n"
  },
  {
    "path": "with-mobx/styles/Home.module.css",
    "content": ".main {\n  padding: 1rem;\n}\n\n.image img {\n  max-height: 200px;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  row-gap: 1rem;\n  column-gap: 1rem;\n}\n\n.search {\n  width: 100%;\n  border: 1px solid #aaa;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1.2rem;\n  margin-bottom: 1rem;\n}"
  },
  {
    "path": "with-mobx/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "with-mobx/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"incremental\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "with-react-query/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "with-react-query/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "with-react-query/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "with-react-query/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "with-react-query/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "with-react-query/package.json",
    "content": "{\n  \"name\": \"with-use-state\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"next\": \"12.1.0\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\",\n    \"react-query\": \"^3.34.16\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^17.0.21\",\n    \"@types/react\": \"^17.0.40\",\n    \"eslint\": \"8.11.0\",\n    \"eslint-config-next\": \"12.1.0\",\n    \"typescript\": \"^4.6.2\"\n  }\n}\n"
  },
  {
    "path": "with-react-query/pages/_app.js",
    "content": "import { useState } from \"react\";\nimport { Hydrate, QueryClient, QueryClientProvider } from \"react-query\";\nimport \"../styles/globals.css\";\n\nfunction MyApp({ Component, pageProps }) {\n  const [queryClient] = useState(() => new QueryClient());\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <Hydrate state={pageProps.dehydratedState}>\n        <Component {...pageProps} />\n      </Hydrate>\n    </QueryClientProvider>\n  );\n}\n\nexport default MyApp;\n"
  },
  {
    "path": "with-react-query/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "with-react-query/pages/index.tsx",
    "content": "import { useState, useMemo } from \"react\";\nimport Head from \"next/head\";\nimport { dehydrate, useQuery, QueryClient } from \"react-query\";\n\nimport styles from \"../styles/Home.module.css\";\n\ninterface Pokemon {\n  id: number;\n  name: string;\n  image: string;\n}\n\nconst getPokemon = (): Promise<Pokemon[]> =>\n  fetch(\"https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json\").then(\n    (resp) => resp.json()\n  );\n\nexport async function getServerSideProps() {\n  const queryClient = new QueryClient();\n\n  await queryClient.prefetchQuery(\"pokemon\", getPokemon);\n\n  return {\n    props: {\n      dehydratedState: dehydrate(queryClient),\n    },\n  };\n}\n\nexport default function Home() {\n  const { data: pokemon } = useQuery(\"pokemon\", getPokemon, {\n    refetchOnMount: false,\n    refetchOnWindowFocus: false,\n  });\n\n  const [filter, setFilter] = useState(\"\");\n\n  const filteredPokemon = useMemo(\n    () =>\n      pokemon.filter((p) =>\n        p.name.toLowerCase().includes(filter.toLowerCase())\n      ),\n    [filter, pokemon]\n  );\n\n  return (\n    <div className={styles.main}>\n      <Head>\n        <title>Pokemon</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <div>\n        <input\n          type=\"text\"\n          value={filter}\n          onChange={(e) => setFilter(e.target.value)}\n          className={styles.search}\n        />\n      </div>\n      <div className={styles.container}>\n        {filteredPokemon.slice(0, 20).map((p) => (\n          <div key={p.id} className={styles.image}>\n            <img\n              alt={p.name}\n              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}\n            />\n            <h2>{p.name}</h2>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "with-react-query/styles/Home.module.css",
    "content": ".main {\n  padding: 1rem;\n}\n\n.image img {\n  max-height: 200px;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  row-gap: 1rem;\n  column-gap: 1rem;\n}\n\n.search {\n  width: 100%;\n  border: 1px solid #aaa;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1.2rem;\n  margin-bottom: 1rem;\n}"
  },
  {
    "path": "with-react-query/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "with-react-query/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"incremental\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "with-react-query-simple/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "with-react-query-simple/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "with-react-query-simple/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "with-react-query-simple/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "with-react-query-simple/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "with-react-query-simple/package.json",
    "content": "{\n  \"name\": \"with-use-state\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"next\": \"12.1.0\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\",\n    \"react-query\": \"^3.34.16\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^17.0.21\",\n    \"@types/react\": \"^17.0.40\",\n    \"eslint\": \"8.11.0\",\n    \"eslint-config-next\": \"12.1.0\",\n    \"typescript\": \"^4.6.2\"\n  }\n}\n"
  },
  {
    "path": "with-react-query-simple/pages/_app.js",
    "content": "import { useState } from \"react\";\nimport { Hydrate, QueryClient, QueryClientProvider } from \"react-query\";\nimport \"../styles/globals.css\";\n\nfunction MyApp({ Component, pageProps }) {\n  const [queryClient] = useState(() => new QueryClient());\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <Component {...pageProps} />\n    </QueryClientProvider>\n  );\n}\n\nexport default MyApp;\n"
  },
  {
    "path": "with-react-query-simple/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "with-react-query-simple/pages/index.tsx",
    "content": "import { useState, useMemo } from \"react\";\nimport Head from \"next/head\";\nimport { useQuery } from \"react-query\";\n\nimport styles from \"../styles/Home.module.css\";\n\ninterface Pokemon {\n  id: number;\n  name: string;\n  image: string;\n}\n\nconst getPokemon = (): Promise<Pokemon[]> =>\n  fetch(\"https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json\").then(\n    (resp) => resp.json()\n  );\n\nexport async function getServerSideProps() {\n  return {\n    props: {\n      initialPokemon: await getPokemon(),\n    },\n  };\n}\n\nexport default function Home({\n  initialPokemon,\n}: {\n  initialPokemon: Pokemon[];\n}) {\n  const { data: pokemon } = useQuery(\"pokemon\", getPokemon, {\n    initialData: initialPokemon,\n    refetchOnMount: false,\n    refetchOnWindowFocus: false,\n  });\n\n  const [filter, setFilter] = useState(\"\");\n\n  const filteredPokemon = useMemo(\n    () =>\n      pokemon.filter((p) =>\n        p.name.toLowerCase().includes(filter.toLowerCase())\n      ),\n    [filter, pokemon]\n  );\n\n  return (\n    <div className={styles.main}>\n      <Head>\n        <title>Pokemon</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <div>\n        <input\n          type=\"text\"\n          value={filter}\n          onChange={(e) => setFilter(e.target.value)}\n          className={styles.search}\n        />\n      </div>\n      <div className={styles.container}>\n        {filteredPokemon.slice(0, 20).map((p) => (\n          <div key={p.id} className={styles.image}>\n            <img\n              alt={p.name}\n              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}\n            />\n            <h2>{p.name}</h2>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "with-react-query-simple/styles/Home.module.css",
    "content": ".main {\n  padding: 1rem;\n}\n\n.image img {\n  max-height: 200px;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  row-gap: 1rem;\n  column-gap: 1rem;\n}\n\n.search {\n  width: 100%;\n  border: 1px solid #aaa;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1.2rem;\n  margin-bottom: 1rem;\n}"
  },
  {
    "path": "with-react-query-simple/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "with-react-query-simple/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"incremental\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "with-redux/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "with-redux/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "with-redux/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "with-redux/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "with-redux/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "with-redux/package.json",
    "content": "{\n  \"name\": \"with-redux\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"@reduxjs/toolkit\": \"^1.8.0\",\n    \"next\": \"12.1.0\",\n    \"next-redux-wrapper\": \"^7.0.5\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\",\n    \"react-redux\": \"^7.2.6\",\n    \"redux\": \"^4.1.2\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^17.0.21\",\n    \"eslint\": \"8.10.0\",\n    \"eslint-config-next\": \"12.1.0\",\n    \"typescript\": \"^4.6.2\"\n  }\n}\n"
  },
  {
    "path": "with-redux/pages/_app.js",
    "content": "import \"../styles/globals.css\";\nimport { Provider } from \"react-redux\";\nimport getStore from \"../src/store\";\n\nfunction MyApp({ Component, pageProps }) {\n  const store = getStore(pageProps.initialState);\n  return (\n    <Provider store={store}>\n      <Component {...pageProps} />\n    </Provider>\n  );\n}\n\nexport default MyApp;\n"
  },
  {
    "path": "with-redux/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "with-redux/pages/index.tsx",
    "content": "/* eslint-disable @next/next/no-img-element */\nimport Head from \"next/head\";\nimport { useEffect } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport getStore, {\n  getPokemon,\n  selectFilteredPokemon,\n  selectSearch,\n  rehydrate,\n  setSearch,\n} from \"../src/store\";\n\nimport styles from \"../styles/Home.module.css\";\n\nfunction Home() {\n  const dispatch = useDispatch();\n\n  const pokemon = useSelector(selectFilteredPokemon);\n  const search = useSelector(selectSearch);\n\n  return (\n    <div className={styles.main}>\n      <Head>\n        <title>Pokemon</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <div>\n        <input\n          type=\"text\"\n          value={search}\n          onChange={(e) => {\n            dispatch(setSearch(e.target.value));\n          }}\n          className={styles.search}\n        />\n      </div>\n      <div className={styles.container}>\n        {pokemon.slice(0, 20).map((p) => (\n          <div key={p.id} className={styles.image}>\n            <img\n              alt={p.name}\n              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}\n            />\n            <h2>{p.name}</h2>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport async function getServerSideProps() {\n  const store = getStore();\n  await store.dispatch(getPokemon());\n  return {\n    props: {\n      initialState: store.getState(),\n    },\n  };\n}\n\nexport default Home;\n"
  },
  {
    "path": "with-redux/src/store.ts",
    "content": "import { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport {\n  Action,\n  PayloadAction,\n  configureStore,\n  ThunkAction,\n} from \"@reduxjs/toolkit\";\n\ninterface Pokemon {\n  id: number;\n  name: string;\n  image: string;\n}\n\nexport type PokemonState = {\n  pokemon: Pokemon[];\n  search: string;\n  filteredPokemon: Pokemon[];\n  pending: boolean;\n  error: boolean;\n};\n\nconst initialState: PokemonState = {\n  pokemon: [],\n  filteredPokemon: [],\n  search: \"\",\n  pending: false,\n  error: false,\n};\n\nexport const getPokemon = createAsyncThunk(\"pokemon/getPokemon\", async () => {\n  const response = await await fetch(\n    \"https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json\"\n  );\n  return await response.json();\n});\n\nexport const pokemonSlice = createSlice({\n  name: \"pokemon\",\n  initialState,\n  reducers: {\n    setSearch(state, action: PayloadAction<string>) {\n      state.search = action.payload;\n      state.filteredPokemon = state.pokemon.filter(({ name }) =>\n        name.toLowerCase().includes(state.search.toLowerCase())\n      );\n    },\n  },\n  extraReducers: (builder) => {\n    builder\n      .addCase(getPokemon.pending, (state) => {\n        state.pending = true;\n      })\n      .addCase(getPokemon.fulfilled, (state, { payload }) => {\n        state.pending = false;\n        state.pokemon = payload;\n        state.filteredPokemon = payload;\n      })\n      .addCase(getPokemon.rejected, (state) => {\n        state.pending = false;\n        state.error = true;\n      });\n  },\n});\n\nexport type AppDispatch = typeof store.dispatch;\nexport type RootState = ReturnType<typeof store.getState>;\nexport type AppThunk<ReturnType = void> = ThunkAction<\n  ReturnType,\n  RootState,\n  unknown,\n  Action<string>\n>;\n\nexport const { setSearch } = pokemonSlice.actions;\n\nexport const selectSearch = (state: RootState) => state.pokemon.search;\nexport const selectFilteredPokemon = (state: RootState) =>\n  state.pokemon.filteredPokemon;\n\nexport let store = null;\n\nexport default function getStore(incomingPreloadState?: RootState) {\n  store = configureStore({\n    reducer: {\n      pokemon: pokemonSlice.reducer,\n    },\n    preloadedState: incomingPreloadState,\n  });\n  return store;\n}\n"
  },
  {
    "path": "with-redux/styles/Home.module.css",
    "content": ".main {\n  padding: 1rem;\n}\n\n.image img {\n  max-height: 200px;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  row-gap: 1rem;\n  column-gap: 1rem;\n}\n\n.search {\n  width: 100%;\n  border: 1px solid #aaa;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1.2rem;\n  margin-bottom: 1rem;\n}"
  },
  {
    "path": "with-redux/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "with-redux/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"incremental\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "with-rxjs/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "with-rxjs/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "with-rxjs/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "with-rxjs/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "with-rxjs/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "with-rxjs/package.json",
    "content": "{\n  \"name\": \"with-rxjs\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"next\": \"12.1.0\",\n    \"observable-hooks\": \"^4.2.0\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\",\n    \"rxjs\": \"^7.5.5\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^17.0.21\",\n    \"@types/react\": \"^17.0.40\",\n    \"eslint\": \"8.10.0\",\n    \"eslint-config-next\": \"12.1.0\",\n    \"typescript\": \"^4.6.2\"\n  }\n}\n"
  },
  {
    "path": "with-rxjs/pages/_app.js",
    "content": "import '../styles/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n  return <Component {...pageProps} />\n}\n\nexport default MyApp\n"
  },
  {
    "path": "with-rxjs/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "with-rxjs/pages/index.tsx",
    "content": "/* eslint-disable @next/next/no-img-element */\nimport { useMemo, useEffect } from \"react\";\nimport Head from \"next/head\";\nimport { BehaviorSubject } from \"rxjs\";\nimport { useObservableState } from \"observable-hooks\";\n\nimport styles from \"../styles/Home.module.css\";\n\ninterface Pokemon {\n  id: number;\n  name: string;\n  image: string;\n}\n\nconst pokemon$ = new BehaviorSubject<Pokemon[]>([]);\nconst filter$ = new BehaviorSubject<string>(\"\");\n\nexport async function getServerSideProps() {\n  const resp = await fetch(\n    \"https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json\"\n  );\n  pokemon$.next(await resp.json());\n  return {\n    props: {\n      initialPokemon: pokemon$.value,\n    },\n  };\n}\n\nexport default function Home({ initialPokemon }) {\n  useEffect(() => {\n    pokemon$.next(initialPokemon);\n  }, [initialPokemon]);\n\n  const pokemon = useObservableState(pokemon$);\n  const filter = useObservableState(filter$);\n\n  const filteredPokemon = useMemo(\n    () =>\n      pokemon.filter((p) =>\n        p.name.toLowerCase().includes(filter.toLowerCase())\n      ),\n    [filter, pokemon]\n  );\n\n  return (\n    <div className={styles.main}>\n      <Head>\n        <title>Pokemon</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <div>\n        <input\n          type=\"text\"\n          value={filter$.value}\n          onChange={(e) => filter$.next(e.target.value)}\n          className={styles.search}\n        />\n      </div>\n      <div className={styles.container}>\n        {filteredPokemon.slice(0, 20).map((p) => (\n          <div key={p.id} className={styles.image}>\n            <img\n              alt={p.name}\n              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}\n            />\n            <h2>{p.name}</h2>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "with-rxjs/styles/Home.module.css",
    "content": ".main {\n  padding: 1rem;\n}\n\n.image img {\n  max-height: 200px;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  row-gap: 1rem;\n  column-gap: 1rem;\n}\n\n.search {\n  width: 100%;\n  border: 1px solid #aaa;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1.2rem;\n  margin-bottom: 1rem;\n}"
  },
  {
    "path": "with-rxjs/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "with-rxjs/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"incremental\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "with-use-state/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "with-use-state/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "with-use-state/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "with-use-state/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "with-use-state/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "with-use-state/package.json",
    "content": "{\n  \"name\": \"with-use-state\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"next\": \"12.1.0\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^17.0.21\",\n    \"@types/react\": \"^17.0.40\",\n    \"eslint\": \"8.11.0\",\n    \"eslint-config-next\": \"12.1.0\",\n    \"typescript\": \"^4.6.2\"\n  }\n}\n"
  },
  {
    "path": "with-use-state/pages/_app.js",
    "content": "import '../styles/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n  return <Component {...pageProps} />\n}\n\nexport default MyApp\n"
  },
  {
    "path": "with-use-state/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "with-use-state/pages/index.tsx",
    "content": "import { useState, useMemo } from \"react\";\nimport Head from \"next/head\";\nimport styles from \"../styles/Home.module.css\";\n\ninterface Pokemon {\n  id: number;\n  name: string;\n  image: string;\n}\n\nexport async function getServerSideProps() {\n  const resp = await fetch(\n    \"https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json\"\n  );\n  return {\n    props: {\n      pokemon: await resp.json(),\n    },\n  };\n}\n\nexport default function Home({ pokemon }: { pokemon: Pokemon[] }) {\n  const [filter, setFilter] = useState(\"\");\n\n  const filteredPokemon = useMemo(\n    () =>\n      pokemon.filter((p) =>\n        p.name.toLowerCase().includes(filter.toLowerCase())\n      ),\n    [filter, pokemon]\n  );\n\n  return (\n    <div className={styles.main}>\n      <Head>\n        <title>Pokemon</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <div>\n        <input\n          type=\"text\"\n          value={filter}\n          onChange={(e) => setFilter(e.target.value)}\n          className={styles.search}\n        />\n      </div>\n      <div className={styles.container}>\n        {filteredPokemon.slice(0, 20).map((p) => (\n          <div key={p.id} className={styles.image}>\n            <img\n              alt={p.name}\n              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}\n            />\n            <h2>{p.name}</h2>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "with-use-state/styles/Home.module.css",
    "content": ".main {\n  padding: 1rem;\n}\n\n.image img {\n  max-height: 200px;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  row-gap: 1rem;\n  column-gap: 1rem;\n}\n\n.search {\n  width: 100%;\n  border: 1px solid #aaa;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1.2rem;\n  margin-bottom: 1rem;\n}"
  },
  {
    "path": "with-use-state/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "with-use-state/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"incremental\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "with-zustand/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "with-zustand/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "with-zustand/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "with-zustand/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "with-zustand/next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "with-zustand/package.json",
    "content": "{\n  \"name\": \"with-use-state\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"next\": \"12.1.0\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\",\n    \"zustand\": \"^3.7.1\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^17.0.21\",\n    \"@types/react\": \"^17.0.40\",\n    \"eslint\": \"8.11.0\",\n    \"eslint-config-next\": \"12.1.0\",\n    \"typescript\": \"^4.6.2\"\n  }\n}\n"
  },
  {
    "path": "with-zustand/pages/_app.js",
    "content": "import '../styles/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n  return <Component {...pageProps} />\n}\n\nexport default MyApp\n"
  },
  {
    "path": "with-zustand/pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "with-zustand/pages/index.tsx",
    "content": "import { useEffect } from \"react\";\nimport Head from \"next/head\";\nimport create from \"zustand\";\n\nimport styles from \"../styles/Home.module.css\";\n\ninterface Pokemon {\n  id: number;\n  name: string;\n  image: string;\n}\n\nconst usePokemonStore = create<{\n  pokemon: Pokemon[];\n  setPokemon: (pokemon: Pokemon[]) => void;\n  filteredPokemon: Pokemon[];\n  filter: string;\n  setFilter: (filter: string) => void;\n}>((set) => ({\n  pokemon: [],\n  filteredPokemon: [],\n  filter: \"\",\n\n  setPokemon: (pokemon: Pokemon[]) =>\n    set({ pokemon, filteredPokemon: pokemon }),\n  setFilter: (filter: string) =>\n    set((state) => ({\n      filter,\n      filteredPokemon: state.pokemon.filter((pokemon) =>\n        pokemon.name.toLowerCase().includes(filter.toLowerCase())\n      ),\n    })),\n}));\n\nexport async function getServerSideProps() {\n  const resp = await fetch(\n    \"https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json\"\n  );\n\n  usePokemonStore.getState().setPokemon(await resp.json());\n\n  return {\n    props: {\n      pokemon: usePokemonStore.getState().pokemon,\n    },\n  };\n}\n\nexport default function Home({ pokemon }: { pokemon: Pokemon[] }) {\n  const { filter, filteredPokemon, setFilter } = usePokemonStore();\n\n  useEffect(() => {\n    usePokemonStore.getState().setPokemon(pokemon);\n  }, [pokemon]);\n\n  return (\n    <div className={styles.main}>\n      <Head>\n        <title>Pokemon</title>\n        <meta name=\"description\" content=\"Generated by create next app\" />\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <div>\n        <input\n          type=\"text\"\n          value={filter}\n          onChange={(e) => setFilter(e.target.value)}\n          className={styles.search}\n        />\n      </div>\n      <div className={styles.container}>\n        {filteredPokemon.slice(0, 20).map((p) => (\n          <div key={p.id} className={styles.image}>\n            <img\n              alt={p.name}\n              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}\n            />\n            <h2>{p.name}</h2>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "with-zustand/styles/Home.module.css",
    "content": ".main {\n  padding: 1rem;\n}\n\n.image img {\n  max-height: 200px;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  row-gap: 1rem;\n  column-gap: 1rem;\n}\n\n.search {\n  width: 100%;\n  border: 1px solid #aaa;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1.2rem;\n  margin-bottom: 1rem;\n}"
  },
  {
    "path": "with-zustand/styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "with-zustand/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"incremental\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  }
]