Add Next example

Author: markerikson

.github/workflows/tests.yml

@@ -139,7 +139,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['16.x']
-        example: ['cra4', 'cra5']
+        example: ['cra4', 'cra5', 'next']
     defaults:
       run:
         working-directory: ./examples/publish-ci/${{ matrix.example }}

examples/publish-ci/next/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  extends: ['react-app', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  rules: {
+    'jsx-a11y/href-no-hash': 'off',
+    'react/react-in-jsx-scope': 'off',
+    // Taken care of by TypeScript's `noUnusedLocals` / `noUnusedParameters`
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    // Silence some bizarre "rule not found" TSLint error
+    '@typescript-eslint/no-angle-bracket-type-assertion': 'off',
+    'no-redeclare': 'off',
+    // Silence some bizarre "rule not found" TSLint error
+    '@typescript-eslint/no-redeclare': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error', { functions: false }],
+    '@typescript-eslint/consistent-type-imports': ['off'],
+    'react-hooks/exhaustive-deps': [
+      'warn',
+      {
+        additionalHooks: '(usePossiblyImmediateEffect)',
+      },
+    ],
+  },
+}

examples/publish-ci/next/.gitignore

@@ -0,0 +1,49 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yalc
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+typesversions
+.cache
+.yarnrc
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+*.tgz

examples/publish-ci/next/README.md

@@ -0,0 +1,29 @@
+# Redux Toolkit TypeScript Example
+
+This example shows how to integrate Next.js with [Redux Toolkit](https://redux-toolkit.js.org).
+
+The **Redux Toolkit** is a standardized way to write Redux logic (create actions and reducers, setup the store with some default middlewares like redux devtools extension). This example demonstrates each of these features with Next.js
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-redux&project-name=with-redux&repository-name=with-redux)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-redux with-redux-app
+```
+
+```bash
+yarn create next-app --example with-redux with-redux-app
+```
+
+```bash
+pnpm create next-app --example with-redux with-redux-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/publish-ci/next/package.json

@@ -0,0 +1,37 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "type-check": "tsc",
+    "serve-app": "yarn start",
+    "test": "yarn playwright test",
+    "format": "prettier --write \"./src/**/*.{ts,tsx}\" \"**/*.md\""
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.9.3",
+    "msw": "^0.49.2",
+    "next": "^13.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.31.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^17.0.45",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "playwright": "^1.31.1",
+    "prettier": "^2.8.4",
+    "serve": "^14.2.0",
+    "typescript": "^4.9.4"
+  },
+  "msw": {
+    "workerDirectory": "public"
+  }
+}

examples/publish-ci/next/playwright.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from '@playwright/test'
+export default defineConfig({
+  webServer: {
+    command: 'yarn serve-app',
+    port: 3000,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+  timeout: 120 * 1000,
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+  },
+  testDir: 'tests/playwright/',
+})