Add next pages dev project

design-system/docs/next.config.mjs

@@ -4,7 +4,7 @@ import withPreconstruct from '@preconstruct/next';
 const nextConfig = {
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
-  experimental: { appDir: true, serverComponentsExternalPackages: ['esbuild'] },
+  experimental: { serverComponentsExternalPackages: ['esbuild'] },
   // reactStrictMode: true,
   // webpack: config => ({
   //   ...config,

dev-projects/next-app/next.config.js

@@ -27,7 +27,6 @@ const nextConfig = {
     ignoreBuildErrors: true,
     tsconfigPath: './tsconfig-for-next/tsconfig.json',
   },
-  experimental: { appDir: true },
   reactStrictMode: false,
   async redirects() {
     return [

dev-projects/next-pages/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

dev-projects/next-pages/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.

dev-projects/next-pages/next.config.js

@@ -0,0 +1,42 @@
+const withPreconstruct = require('@preconstruct/next');
+const compiler = require('@ts-gql/compiler');
+const path = require('path');
+
+const withTsGql =
+  (internalConfig = {}) =>
+  (phase, thing) => {
+    if (phase === 'phase-development-server') {
+      compiler
+        .watch(path.resolve(__dirname, '../../packages/keystatic'))
+        .catch(err => {
+          console.error(err.toString());
+          process.exit(1);
+        });
+    }
+    let internalConfigObj =
+      typeof internalConfig === 'function'
+        ? internalConfig(phase, thing)
+        : internalConfig;
+    return internalConfigObj;
+  };
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: { ignoreDuringBuilds: true },
+  typescript: {
+    ignoreBuildErrors: true,
+    tsconfigPath: './tsconfig-for-next/tsconfig.json',
+  },
+  reactStrictMode: false,
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/keystatic',
+        permanent: false,
+      },
+    ];
+  },
+};
+
+module.exports = withTsGql(withPreconstruct(nextConfig));

dev-projects/next-pages/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@example/next-pages",
+  "version": "0.0.91",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.18.3",
+    "@keystar/ui": "^0.4.0",
+    "@keystatic/core": "^0.1.9",
+    "@keystatic/next": "^1.0.0",
+    "@preconstruct/next": "^4.0.0",
+    "@types/react": "^18.2.8",
+    "graphql": "^16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@ts-gql/compiler": "^0.16.1",
+    "@ts-gql/next": "^17.0.0",
+    "next": "^14.0.0",
+    "tsx": "^3.8.0",
+    "typescript": "^5.2.2"
+  }
+}

dev-projects/next-pages/pages/api/keystatic/[[...params]].tsx

@@ -0,0 +1,4 @@
+import { makeAPIRouteHandler } from '@keystatic/next/api';
+import keystaticConfig from '../../../../next-app/keystatic.config';
+
+export default makeAPIRouteHandler({ config: keystaticConfig });

dev-projects/next-pages/pages/keystatic/[[...params]].tsx

@@ -0,0 +1,4 @@
+import { makePage } from '@keystatic/next/ui/pages';
+import keystaticConfig from '../../../next-app/keystatic.config';
+
+export default makePage(keystaticConfig);

dev-projects/next-pages/tsconfig-for-next/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  // next forcing specific tsconfig options is annoying
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": false,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": false,
+    "esModuleInterop": true,
+    "declaration": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "downlevelIteration": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

dev-projects/next-pages/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*"],
+  "exclude": ["**/dist/**/*", "**/node_modules/**/*"]
+}