Add nextjs app and pages version of the app (#198)

* add nextjs version with pages folder * update ci * fix head * update tests * add public page with ssr * update * rename app folder * update docs * update * init nextjs-app from nextjs-pages * migrate nextjs app * fix linting * update * more updates * update readme * update docs * use fetch api instead of axios * cleanup
alan2207 · Sep 3, 2024 · 10f330f · 10f330f
1 parent ea1ebba
commit 10f330f
Show file tree

Hide file tree

Showing 344 changed files with 40,452 additions and 48 deletions.
diff --git a/.github/workflows/nextjs-app-ci.yml b/.github/workflows/nextjs-app-ci.yml
@@ -0,0 +1,62 @@
+name: Next.js App CI
+on:
+  push:
+    branches: ["*"]
+    paths-ignore:
+      - "README.md"
+      - "docs/**"
+  pull_request:
+    branches: [master]
+    paths-ignore:
+      - "README.md"
+      - "docs/**"
+jobs:
+  all-cli-checks:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./apps/nextjs-app
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Set environment variables
+        run: mv .env.example .env
+      - name: Install dependencies
+        run: yarn install
+      - name: Build application
+        run: yarn build
+      - name: Run tests
+        run: yarn test
+      - name: Run linter
+        run: yarn lint
+      - name: Check types
+        run: yarn check-types
+  e2e:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./apps/nextjs-app
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Set environment variables
+        run: mv .env.example-e2e .env
+      - name: Install dependencies
+        run: npm install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn test-e2e
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            mocked-db.json
+          retention-days: 30
diff --git a/.github/workflows/nextjs-pages-ci.yml b/.github/workflows/nextjs-pages-ci.yml
@@ -0,0 +1,62 @@
+name: Next.js Pages CI
+on:
+  push:
+    branches: ["*"]
+    paths-ignore:
+      - "README.md"
+      - "docs/**"
+  pull_request:
+    branches: [master]
+    paths-ignore:
+      - "README.md"
+      - "docs/**"
+jobs:
+  all-cli-checks:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./apps/nextjs-pages
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Set environment variables
+        run: mv .env.example .env
+      - name: Install dependencies
+        run: yarn install
+      - name: Build application
+        run: yarn build
+      - name: Run tests
+        run: yarn test
+      - name: Run linter
+        run: yarn lint
+      - name: Check types
+        run: yarn check-types
+  e2e:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./apps/nextjs-pages
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Set environment variables
+        run: mv .env.example-e2e .env
+      - name: Install dependencies
+        run: npm install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn test-e2e
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            mocked-db.json
+          retention-days: 30
diff --git a/.github/workflows/ci.yml → .github/workflows/react-vite-ci.yml b/.github/workflows/ci.yml → .github/workflows/react-vite-ci.yml
@@ -1,4 +1,4 @@
-name: CI
+name: React Vite CI
 on:
   push:
     branches: ["*"]
@@ -11,7 +11,7 @@ on:
       - "README.md"
       - "docs/**"
 jobs:
-  all-cli-check:
+  all-cli-checks:
     runs-on: ubuntu-latest
     defaults:
       run:

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1 +1 @@
-yarn --cwd apps/react-vite lint-staged
+yarn --cwd apps/nextjs-app lint-staged && yarn --cwd apps/nextjs-pages lint-staged && yarn --cwd apps/react-vite lint-staged
diff --git a/README.md b/README.md
@@ -24,9 +24,9 @@ This repo doesn't aim to be a silver bullet for all React applications as there
 - Uses the right tools for the job
 - Clean boundaries between different parts of the application
 - Everyone on the team is on the same page when it comes to how things are done
-- Security
-- Performance
-- Scalability in terms of codebase and team size
+- Secure
+- Performant
+- Scalable in terms of codebase and team size
 - Issues detectable as early as possible
 
 #### Disclaimer:
@@ -56,9 +56,10 @@ Contributions are always welcome! If you have any ideas, suggestions, fixes, fee
 
 1. Clone this repo
 2. Create a branch: `git checkout -b your-feature`
-3. Make some changes
-4. Test your changes
-5. Push your branch and open a Pull Request
+3. Execute the `yarn prepare` script.
+4. Make some changes
+5. Test your changes
+6. Push your branch and open a Pull Request
 
 ## License
 

diff --git a/apps/nextjs-app/.env.example b/apps/nextjs-app/.env.example
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_API_URL=http://localhost:8080/api
+NEXT_PUBLIC_ENABLE_API_MOCKING=false
+NEXT_PUBLIC_MOCK_API_PORT=8080
+NEXT_PUBLIC_URL=http://localhost:3000
diff --git a/apps/nextjs-app/.env.example-e2e b/apps/nextjs-app/.env.example-e2e
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_API_URL=http://localhost:8080/api
+NEXT_PUBLIC_ENABLE_API_MOCKING=false
+NEXT_PUBLIC_MOCK_API_PORT=8080
+NEXT_PUBLIC_URL=http://localhost:3000
diff --git a/apps/nextjs-app/.eslintrc.cjs b/apps/nextjs-app/.eslintrc.cjs
@@ -0,0 +1,154 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es6: true,
+  },
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  ignorePatterns: [
+    'node_modules/*',
+    'public/mockServiceWorker.js',
+    'generators/*',
+  ],
+  extends: ['eslint:recommended', 'next/core-web-vitals'],
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      parser: '@typescript-eslint/parser',
+      settings: {
+        react: { version: 'detect' },
+        'import/resolver': {
+          typescript: {},
+        },
+      },
+      env: {
+        browser: true,
+        node: true,
+        es6: true,
+      },
+      extends: [
+        'eslint:recommended',
+        'plugin:import/errors',
+        'plugin:import/warnings',
+        'plugin:import/typescript',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:prettier/recommended',
+        'plugin:testing-library/react',
+        'plugin:jest-dom/recommended',
+        'plugin:tailwindcss/recommended',
+        'plugin:vitest/legacy-recommended',
+      ],
+      rules: {
+        '@next/next/no-img-element': 'off',
+        'import/no-restricted-paths': [
+          'error',
+          {
+            zones: [
+              // disables cross-feature imports:
+              // eg. src/features/discussions should not import from src/features/comments, etc.
+              {
+                target: './src/features/auth',
+                from: './src/features',
+                except: ['./auth'],
+              },
+              {
+                target: './src/features/comments',
+                from: './src/features',
+                except: ['./comments'],
+              },
+              {
+                target: './src/features/discussions',
+                from: './src/features',
+                except: ['./discussions'],
+              },
+              {
+                target: './src/features/teams',
+                from: './src/features',
+                except: ['./teams'],
+              },
+              {
+                target: './src/features/users',
+                from: './src/features',
+                except: ['./users'],
+              },
+              // enforce unidirectional codebase:
+
+              // e.g. src/app can import from src/features but not the other way around
+              {
+                target: './src/features',
+                from: './src/app',
+              },
+
+              // e.g src/features and src/app can import from these shared modules but not the other way around
+              {
+                target: [
+                  './src/components',
+                  './src/hooks',
+                  './src/lib',
+                  './src/types',
+                  './src/utils',
+                ],
+                from: ['./src/features', './src/app'],
+              },
+            ],
+          },
+        ],
+        'import/no-cycle': 'error',
+        'linebreak-style': ['error', 'unix'],
+        'react/prop-types': 'off',
+        'import/order': [
+          'error',
+          {
+            groups: [
+              'builtin',
+              'external',
+              'internal',
+              'parent',
+              'sibling',
+              'index',
+              'object',
+            ],
+            'newlines-between': 'always',
+            alphabetize: { order: 'asc', caseInsensitive: true },
+          },
+        ],
+        'import/default': 'off',
+        'import/no-named-as-default-member': 'off',
+        'import/no-named-as-default': 'off',
+        'react/react-in-jsx-scope': 'off',
+        'jsx-a11y/anchor-is-valid': 'off',
+        '@typescript-eslint/no-unused-vars': ['error'],
+        '@typescript-eslint/explicit-function-return-type': ['off'],
+        '@typescript-eslint/explicit-module-boundary-types': ['off'],
+        '@typescript-eslint/no-empty-function': ['off'],
+        '@typescript-eslint/no-explicit-any': ['off'],
+        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+      },
+    },
+    {
+      plugins: ['check-file'],
+      files: ['src/**/*'],
+      rules: {
+        'check-file/filename-naming-convention': [
+          'error',
+          {
+            '**/*.{ts,tsx}': 'KEBAB_CASE',
+          },
+          {
+            ignoreMiddleExtensions: true,
+          },
+        ],
+        'check-file/folder-naming-convention': [
+          'error',
+          {
+            '!(src/app)/**/*': 'KEBAB_CASE',
+            '!(**/__tests__)/**/*': 'KEBAB_CASE',
+          },
+        ],
+      },
+    },
+  ],
+};
diff --git a/apps/nextjs-app/.gitignore b/apps/nextjs-app/.gitignore
@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/e2e/.auth/
+
+# storybook
+migration-storybook.log
+storybook.log
+storybook-static
+
+
+# production
+/dist
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# local
+mocked-db.json
+
+/.next
+/.vite
+tsconfig.tsbuildinfo
diff --git a/apps/nextjs-app/.prettierignore b/apps/nextjs-app/.prettierignore
@@ -0,0 +1 @@
+*.hbs
diff --git a/apps/nextjs-app/.prettierrc b/apps/nextjs-app/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false
+}