tested 'getServerSideProps()' (nextjs)

Author: bennobuilder

examples/nextjs/develop/clock/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["next", "next/core-web-vitals"]
+}

examples/nextjs/develop/clock/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/nextjs/develop/clock/README.md

@@ -0,0 +1,37 @@
+> Inspired by https://github.com/vercel/next.js/tree/canary/examples/with-redux
+
+
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[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.tsx`.
+
+The `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.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The 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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs/develop/clock/components/Clock.tsx

@@ -0,0 +1,34 @@
+import { useAgile } from '@agile-ts/react';
+import { LAST_UPDATED_TIMESTAMP, LIGHT } from '../src/core';
+
+const formatTime = (timestamp: number) => {
+  // cut off except hh:mm:ss
+  return new Date(timestamp).toJSON().slice(11, 19);
+};
+
+const Clock = () => {
+  const [lastUpdatedTimestamp, light] = useAgile([
+    LAST_UPDATED_TIMESTAMP,
+    LIGHT,
+  ]);
+
+  return (
+    <div className={light ? 'light' : ''}>
+      {formatTime(lastUpdatedTimestamp)}
+      <style jsx>{`
+        div {
+          padding: 15px;
+          display: inline-block;
+          color: #82fa58;
+          font: 50px menlo, monaco, monospace;
+          background-color: #000;
+        }
+        .light {
+          background-color: #999;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Clock;

examples/nextjs/develop/clock/components/Counter.tsx

@@ -0,0 +1,24 @@
+import { useAgile } from '@agile-ts/react';
+import {
+  COUNTER,
+  decrementCount,
+  incrementCount,
+  resetCount,
+} from '../src/core';
+
+const Counter = () => {
+  const count = useAgile(COUNTER);
+
+  return (
+    <div>
+      <h1>
+        Count: <span>{count}</span>
+      </h1>
+      <button onClick={incrementCount}>+1</button>
+      <button onClick={decrementCount}>-1</button>
+      <button onClick={resetCount}>Reset</button>
+    </div>
+  );
+};
+
+export default Counter;

examples/nextjs/develop/clock/components/Nav.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+
+const Nav = () => {
+  return (
+    <nav>
+      <Link href="/">
+        <a>Index</a>
+      </Link>
+      <Link href="/ssg">
+        <a>SSG</a>
+      </Link>
+      <Link href="/ssr">
+        <a>SSR</a>
+      </Link>
+      <style jsx>
+        {`
+          a {
+            margin-right: 25px;
+          }
+        `}
+      </style>
+    </nav>
+  );
+};
+
+export default Nav;

examples/nextjs/develop/clock/components/Page.tsx

@@ -0,0 +1,22 @@
+import useInterval from '../src/useInterval';
+import Nav from './Nav';
+import Clock from './Clock';
+import Counter from './Counter';
+import { tick } from '../src/core';
+
+const Page = () => {
+  // Tick the time every second
+  useInterval(() => {
+    tick(Date.now(), true);
+  }, 1000);
+
+  return (
+    <>
+      <Nav />
+      <Clock />
+      <Counter />
+    </>
+  );
+};
+
+export default Page;

examples/nextjs/develop/clock/next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

examples/nextjs/develop/clock/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

examples/nextjs/develop/clock/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "clock",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "install:dev:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/logger @agile-ts/utils & yarn install",
+    "install:prod:agile": "yarn add @agile-ts/core @agile-ts/react @agile-ts/logger @agile-ts/utils & yarn install"
+  },
+  "dependencies": {
+    "@agile-ts/core": "file:.yalc/@agile-ts/core",
+    "@agile-ts/logger": "file:.yalc/@agile-ts/logger",
+    "@agile-ts/react": "file:.yalc/@agile-ts/react",
+    "@agile-ts/utils": "file:.yalc/@agile-ts/utils",
+    "next": "11.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.14",
+    "eslint": "7.31.0",
+    "eslint-config-next": "11.0.1",
+    "typescript": "4.3.5"
+  }
+}