upstash · chronark · Jun 20, 2022 · Jun 20, 2022 · Jun 20, 2022 · Jun 20, 2022
diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml
@@ -104,6 +104,60 @@ jobs:
         env:
           DEPLOYMENT_URL: http://localhost:3000
 
+  nextjs-export-local:
+    needs:
+      - test
+    env:
+      UPSTASH_REDIS_REST_URL: http://127.0.0.1:6379
+      UPSTASH_REDIS_REST_TOKEN: ${{ secrets.UPSTASH_AUTH_TOKEN }}
+      NEXT_PUBLIC_UPSTASH_REDIS_REST_URL: http://127.0.0.1:6379
+      NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN: ${{ secrets.UPSTASH_AUTH_TOKEN }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup repo
+        uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 6
+
+      - name: Build
+        run: deno run -A ./cmd/build.ts
+
+      - name: Start redis server
+        uses: ./.github/actions/redis
+        with:
+          UPSTASH_REDIS_REST_URL: http://127.0.0.1:6379
+          UPSTASH_REDIS_REST_TOKEN: ${{ secrets.UPSTASH_AUTH_TOKEN }}
+          UPSTASH_REPO_ACCESS_TOKEN: ${{ secrets.UPSTASH_REPO_ACCESS_TOKEN }}
+          REDIS_SERVER_CONFIG: ${{ secrets.REDIS_SERVER_CONFIG }}
+
+      - name: Install example
+        run: pnpm add @upstash/redis@../../dist
+        working-directory: ./examples/nextjs_export
+
+      - name: Build example
+        run: pnpm build
+        working-directory: ./examples/nextjs_export
+
+      - name: Start example
+        run: pnpm start &
+        working-directory: ./examples/nextjs_export
+
+      - name: Test
+        run: deno test --allow-net --allow-env ./examples/nextjs_export/test.ts
+        env:
+          DEPLOYMENT_URL: http://localhost:3000
+
   nextjs-edge-local:
     needs:
       - test
@@ -191,6 +245,39 @@ jobs:
       - name: Test
         run: deno test --allow-net --allow-env ./examples/nextjs/test.ts
 
+  nextjs-export-deployed:
+    runs-on: ubuntu-latest
+    concurrency: vercel
+    needs:
+      - release
+    steps:
+      - name: Setup repo
+        uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 6
+
+      - name: Deploy
+        run: |
+          pnpm add @upstash/redis@${{needs.release.outputs.version}}
+          DEPLOYMENT_URL=$(npx vercel --token=${{ secrets.VERCEL_TOKEN }})
+          echo "DEPLOYMENT_URL=${DEPLOYMENT_URL}" >> $GITHUB_ENV
+        env:
+          VERCEL_ORG_ID: ${{secrets.VERCEL_TEAM_ID}}
+          VERCEL_PROJECT_ID: "prj_O4xbovmJKQ2xLtjhwrtxA3sKpPAY"
+
+      - name: Test
+        run: deno test --allow-net --allow-env ./examples/nextjs/test.ts
+
   nextjs-edge-deployed:
     runs-on: ubuntu-latest
     concurrency: vercel
@@ -693,6 +780,7 @@ jobs:
       - nodejs-18-local
       - fastly-local
       - nextjs-local
+      - nextjs-export-local
       - nextjs-edge-local
       - cloudflare-workers-with-wrangler-1-local
       - cloudflare-workers-with-typescript-local
@@ -721,7 +809,16 @@ jobs:
         run: deno run -A ./cmd/build.ts ${{ steps.version.outputs.version }}
 
       - name: Publish ci version
+        if: ${{ github.event_name != 'schedule' }}
         working-directory: ./dist
         run: |
           echo "//registry.npmjs.org/:_authToken=${{secrets.NPM_TOKEN}}" > .npmrc
           npm publish --access public --tag=ci
+
+        # When the release is scheduled, we the git commit sha will not have changed, so we can not create a real release.
+      - name: Pretend to publish ci version
+        if: ${{ github.event_name == 'schedule' }}
+        working-directory: ./dist
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${{secrets.NPM_TOKEN}}" > .npmrc
+          npm publish --access public --tag=ci --dry-run
diff --git a/examples/nextjs/.vercel/README.txt b/examples/nextjs/.vercel/README.txt
diff --git a/examples/nextjs/.vercel/project.json b/examples/nextjs/.vercel/project.json
diff --git a/examples/nextjs_edge/.vercel/README.txt b/examples/nextjs_edge/.vercel/README.txt
diff --git a/examples/nextjs_edge/.vercel/project.json b/examples/nextjs_edge/.vercel/project.json
diff --git a/examples/nextjs_export/.vercel/project.json b/examples/nextjs_export/.vercel/project.json
@@ -0,0 +1,4 @@
+{
+  "projectId": "prj_O4xbovmJKQ2xLtjhwrtxA3sKpPAY",
+  "orgId": "team_sXwin2UutrVPexvIUa3FObRG"
+}
diff --git a/examples/nextjs_export/LICENSE b/examples/nextjs_export/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Upstash
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/examples/nextjs_export/README.md b/examples/nextjs_export/README.md
@@ -0,0 +1,27 @@
+# Nextjs Example
+
+## How to use
+
+1. Clone and install the example
+
+```bash
+git clone https://github.com/upstash/upstash-redis.git
+cd upstash-redis/examples/nextjs
+npm install
+```
+
+2. Create a free Database on [upstash.com](https://console.upstash.com/redis)
+3. Copy the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` to `.env`
+
+```
+UPSTASH_REDIS_REST_URL=""
+UPSTASH_REDIS_REST_TOKEN=""
+```
+
+4. Start the development server
+
+```bash
+npm run dev
+```
+
+5. Open your browser at [localhost:3000](http://localhost:3000)
diff --git a/examples/nextjs_export/components/Breadcrumb.tsx b/examples/nextjs_export/components/Breadcrumb.tsx
@@ -0,0 +1,72 @@
+import Image from "next/image";
+import React from "react";
+
+export type BreadcrumbItemProps = {
+  name: string;
+  url: string;
+};
+
+export type BreadcrumbProps = {
+  data: BreadcrumbItemProps[];
+  showRoot?: boolean;
+};
+
+export function BreadcrumbDivider() {
+  return <span className="text-gray-300">/</span>;
+}
+
+export function BreadcrumbItem({ url, name }: BreadcrumbItemProps) {
+  return (
+    <a
+      className="cursor-pointer hover:underline"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={url}
+    >
+      {name}
+    </a>
+  );
+}
+
+export function Breadcrumb({ data, showRoot = true }: BreadcrumbProps) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+        />
+      </svg>
+
+      {showRoot && (
+        <React.Fragment>
+          <span className="text-gray-300">/</span>
+
+          <a
+            className="cursor-pointer hover:underline"
+            href="https://github.com/upstash"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            upstash
+          </a>
+        </React.Fragment>
+      )}
+
+      {data.map((item) => {
+        return (
+          <React.Fragment key={item.url}>
+            <BreadcrumbDivider />
+            <BreadcrumbItem url={item.url} name={item.name} />
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/examples/nextjs_export/components/Header.tsx b/examples/nextjs_export/components/Header.tsx
@@ -0,0 +1,18 @@
+import { Breadcrumb, BreadcrumbProps } from "./Breadcrumb";
+import StarButton from "./StarButton";
+import React from "react";
+
+export type HeaderProps = {
+  breadcrumbOptions: BreadcrumbProps;
+};
+
+export default function Header({ breadcrumbOptions }: HeaderProps) {
+  return (
+    <header className="relative z-10 flex items-center bg-gray-900 py-4 px-6 text-gray-50">
+      <Breadcrumb {...breadcrumbOptions} />
+      <div className="ml-auto hidden sm:block">
+        <StarButton {...[...breadcrumbOptions?.data].pop()} />
+      </div>
+    </header>
+  );
+}
diff --git a/examples/nextjs_export/components/ReadBlogPost.tsx b/examples/nextjs_export/components/ReadBlogPost.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function ReadBlogPost({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="bg-gray-100 p-4 text-center">{children}</div>;
+}
diff --git a/examples/nextjs_export/components/StarButton.tsx b/examples/nextjs_export/components/StarButton.tsx
@@ -0,0 +1,28 @@
+export type StarButtonProps = {
+  url?: string;
+};
+
+export default function StarButton({ url }: StarButtonProps) {
+  if (!url) {
+    return null;
+  }
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex cursor-pointer items-center gap-1.5 rounded bg-white px-4 py-1.5 text-gray-700 hover:bg-primary-50 hover:text-primary-700"
+    >
+      <svg width="18" height="18" viewBox="0 0 16 16" version="1.1">
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"
+        >
+        </path>
+      </svg>
+      <span>Star on GitHub</span>
+    </a>
+  );
+}
diff --git a/examples/nextjs_export/lib/redis.ts b/examples/nextjs_export/lib/redis.ts
@@ -0,0 +1,2 @@
+import { Redis } from "@upstash/redis";
+export const redis = Redis.fromEnv();
diff --git a/examples/nextjs_export/next-env.d.ts b/examples/nextjs_export/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/nextjs_export/package.json b/examples/nextjs_export/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "upstash-redis-nextjs",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@upstash/redis": "latest",
+    "next": "^12.1.6",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.1",
+    "@types/node": "^17.0.32",
+    "@types/react": "^18.0.9",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.13",
+    "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.10",
+    "tailwindcss": "^3.0.24",
+    "typescript": "^4.6.4"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { Redis } from "@upstash/redis";
		export const redis = Redis.fromEnv();