feat: appdir option (smaller version) (#1567)

Co-authored-by: c-ehrlich <ehrlich.christopher@gmail.com>

.changeset/calm-maps-allow.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+feat: add app router option

.github/workflows/e2e.yml

@@ -27,9 +27,10 @@ jobs:
         tailwind: ["true", "false"]
         nextAuth: ["true", "false"]
         prisma: ["true", "false"]
+        appRouter: ["true", "false"]
         drizzle: ["true", "false"]
 
-    name: "Build and Start T3 App ${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}-${{ matrix.drizzle}}"
+    name: "Build and Start T3 App ${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}-${{ matrix.drizzle}}-${{ matrix.appRouter }}"
     steps:
       - uses: actions/checkout@v3
         with:
@@ -69,19 +70,19 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        if: ${{ steps.matrix-valid.outputs.continue == 'true' }}
+        if: ${{ steps.matrix-valid.outputs.continue == 'true' }}
         run: pnpm install
 
       - run: pnpm turbo --filter=create-t3-app build
-        if: ${{ steps.matrix-valid.outputs.continue == 'true' }}
+        if: ${{ steps.matrix-valid.outputs.continue == 'true' }}
 
       # has to be scaffolded outside the CLI project so that no lint/tsconfig are leaking
       # through. this way it ensures that it is the app's configs that are being used
       # FIXME: this is a bit hacky, would rather have --packages=trpc,tailwind,... but not sure how to setup the matrix for that
-      - run: cd cli && pnpm start ../../ci-${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}-${{ matrix.drizzle}} --noGit --CI --trpc=${{ matrix.trpc }} --tailwind=${{ matrix.tailwind }} --nextAuth=${{ matrix.nextAuth }} --prisma=${{ matrix.prisma }} --drizzle=${{ matrix.drizzle }}
-        if: ${{ steps.matrix-valid.outputs.continue == 'true' }}
-      - run: cd ../ci-${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}-${{ matrix.drizzle}} && pnpm build
-        if: ${{ steps.matrix-valid.outputs.continue == 'true' }}
+      - run: cd cli && pnpm start ../../ci-${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}-${{ matrix.drizzle}}-${{ matrix.appRouter }} --noGit --CI --trpc=${{ matrix.trpc }} --tailwind=${{ matrix.tailwind }} --nextAuth=${{ matrix.nextAuth }} --prisma=${{ matrix.prisma }} --drizzle=${{ matrix.drizzle }} --appRouter=${{ matrix.appRouter }}
+        if: ${{ steps.matrix-valid.outputs.continue == 'true' }}
+      - run: cd ../ci-${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}-${{ matrix.drizzle}}-${{ matrix.appRouter }} && pnpm build
+        if: ${{ steps.matrix-valid.outputs.continue == 'true' }}
         env:
           NEXTAUTH_SECRET: foo
           DATABASE_URL: mysql://root:root@localhost:3306/test # can't use url from example env cause we block that in t3-env

cli/package.json

@@ -40,7 +40,7 @@
     "dev": "tsup --watch",
     "clean": "rm -rf dist .turbo node_modules",
     "start": "node dist/index.js",
-    "lint": "eslint . --report-unused-disable-directives",
+    "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "pnpm lint --fix",
     "format": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --write",
     "format:check": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --check",
@@ -86,6 +86,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "superjson": "^1.12.2",
+    "tailwindcss": "^3.3.2",
     "tsup": "^6.7.0",
     "type-fest": "^3.7.0",
     "typescript": "^5.0.4",

cli/src/cli/index.ts

@@ -29,6 +29,8 @@ interface CliFlags {
   drizzle: boolean;
   /** @internal Used in CI. */
   nextAuth: boolean;
+  /** @internal Used in CI. */
+  appRouter: boolean;
 }
 
 interface CliResults {
@@ -51,6 +53,7 @@ const defaultOptions: CliResults = {
     drizzle: false,
     nextAuth: false,
     importAlias: "~/",
+    appRouter: false,
   },
 };
 
@@ -121,6 +124,11 @@ export const runCli = async (): Promise<CliResults> => {
       "Explicitly tell the CLI to use a custom import alias",
       defaultOptions.flags.importAlias
     )
+    .option(
+      "--appRouter [boolean]",
+      "Explicitly tell the CLI to use the new Next.js app router",
+      (value) => !!value && value !== "false"
+    )
     /** END CI-FLAGS */
     .version(getVersion(), "-v, --version", "Display the version number")
     .addHelpText(
@@ -246,6 +254,14 @@ export const runCli = async (): Promise<CliResults> => {
             initialValue: "none",
           });
         },
+        appRouter: () => {
+          return p.confirm({
+            message:
+              chalk.bgCyan(" EXPERIMENTAL ") +
+              " Would you like to use Next.js App Router?",
+            initialValue: false,
+          });
+        },
         ...(!cliResults.flags.noGit && {
           git: () => {
             return p.confirm({
@@ -293,6 +309,7 @@ export const runCli = async (): Promise<CliResults> => {
       packages,
       flags: {
         ...cliResults.flags,
+        appRouter: project.appRouter ?? cliResults.flags.appRouter,
         noGit: !project.git ?? cliResults.flags.noGit,
         noInstall: !project.install ?? cliResults.flags.noInstall,
         importAlias: project.importAlias ?? cliResults.flags.importAlias,

cli/src/helpers/createProject.ts

@@ -1,8 +1,15 @@
+import fs from "fs";
 import path from "path";
 
+import { PKG_ROOT } from "~/consts.js";
 import { installPackages } from "~/helpers/installPackages.js";
 import { scaffoldProject } from "~/helpers/scaffoldProject.js";
-import { selectAppFile, selectIndexFile } from "~/helpers/selectBoilerplate.js";
+import {
+  selectAppFile,
+  selectIndexFile,
+  selectLayoutFile,
+  selectPageFile,
+} from "~/helpers/selectBoilerplate.js";
 import { type PkgInstallerMap } from "~/installers/index.js";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 
@@ -12,13 +19,15 @@ interface CreateProjectOptions {
   scopedAppName: string;
   noInstall: boolean;
   importAlias: string;
+  appRouter: boolean;
 }
 
 export const createProject = async ({
   projectName,
   scopedAppName,
   packages,
   noInstall,
+  appRouter,
 }: CreateProjectOptions) => {
   const pkgManager = getUserPkgManager();
   const projectDir = path.resolve(process.cwd(), projectName);
@@ -30,6 +39,7 @@ export const createProject = async ({
     pkgManager,
     scopedAppName,
     noInstall,
+    appRouter,
   });
 
   // Install the selected packages
@@ -40,11 +50,38 @@ export const createProject = async ({
     pkgManager,
     packages,
     noInstall,
+    appRouter,
   });
 
-  // TODO: Look into using handlebars or other templating engine to scaffold without needing to maintain multiple copies of the same file
-  selectAppFile({ projectDir, packages });
-  selectIndexFile({ projectDir, packages });
+  // Select necessary _app,index / layout,page files
+  if (appRouter) {
+    // Replace next.config
+    fs.copyFileSync(
+      path.join(PKG_ROOT, "template/extras/config/next-config-appdir.mjs"),
+      path.join(projectDir, "next.config.mjs")
+    );
+
+    selectLayoutFile({ projectDir, packages });
+    selectPageFile({ projectDir, packages });
+  } else {
+    selectAppFile({ projectDir, packages });
+    selectIndexFile({ projectDir, packages });
+  }
+
+  // If no tailwind, select use css modules
+  if (!packages.tailwind.inUse) {
+    const indexModuleCss = path.join(
+      PKG_ROOT,
+      "template/extras/src/index.module.css"
+    );
+    const indexModuleCssDest = path.join(
+      projectDir,
+      "src",
+      appRouter ? "app" : "pages",
+      "index.module.css"
+    );
+    fs.copyFileSync(indexModuleCss, indexModuleCssDest);
+  }
 
   return projectDir;
 };

cli/src/helpers/selectBoilerplate.ts

@@ -17,7 +17,7 @@ export const selectAppFile = ({
   const usingTRPC = packages.trpc.inUse;
   const usingNextAuth = packages.nextAuth.inUse;
 
-  let appFile = "";
+  let appFile = "base.tsx";
   if (usingNextAuth && usingTRPC) {
     appFile = "with-auth-trpc.tsx";
   } else if (usingNextAuth && !usingTRPC) {
@@ -26,11 +26,32 @@ export const selectAppFile = ({
     appFile = "with-trpc.tsx";
   }
 
-  if (appFile !== "") {
-    const appSrc = path.join(appFileDir, appFile);
-    const appDest = path.join(projectDir, "src/pages/_app.tsx");
-    fs.copySync(appSrc, appDest);
+  const appSrc = path.join(appFileDir, appFile);
+  const appDest = path.join(projectDir, "src/pages/_app.tsx");
+  fs.copySync(appSrc, appDest);
+};
+
+// Similar to _app, but for app router
+export const selectLayoutFile = ({
+  projectDir,
+  packages,
+}: SelectBoilerplateProps) => {
+  const layoutFileDir = path.join(PKG_ROOT, "template/extras/src/app/layout");
+
+  const usingTw = packages.tailwind.inUse;
+  const usingTRPC = packages.trpc.inUse;
+  let layoutFile = "base.tsx";
+  if (usingTRPC && usingTw) {
+    layoutFile = "with-trpc-tw.tsx";
+  } else if (usingTRPC && !usingTw) {
+    layoutFile = "with-trpc.tsx";
+  } else if (!usingTRPC && usingTw) {
+    layoutFile = "with-tw.tsx";
   }
+
+  const appSrc = path.join(layoutFileDir, layoutFile);
+  const appDest = path.join(projectDir, "src/app/layout.tsx");
+  fs.copySync(appSrc, appDest);
 };
 
 // This selects the proper index.tsx to be used that showcases the chosen tech
@@ -44,7 +65,7 @@ export const selectIndexFile = ({
   const usingTw = packages.tailwind.inUse;
   const usingAuth = packages.nextAuth.inUse;
 
-  let indexFile = "";
+  let indexFile = "base.tsx";
   if (usingTRPC && usingTw && usingAuth) {
     indexFile = "with-auth-trpc-tw.tsx";
   } else if (usingTRPC && !usingTw && usingAuth) {
@@ -57,9 +78,36 @@ export const selectIndexFile = ({
     indexFile = "with-tw.tsx";
   }
 
-  if (indexFile !== "") {
-    const indexSrc = path.join(indexFileDir, indexFile);
-    const indexDest = path.join(projectDir, "src/pages/index.tsx");
-    fs.copySync(indexSrc, indexDest);
+  const indexSrc = path.join(indexFileDir, indexFile);
+  const indexDest = path.join(projectDir, "src/pages/index.tsx");
+  fs.copySync(indexSrc, indexDest);
+};
+
+// Similar to index, but for app router
+export const selectPageFile = ({
+  projectDir,
+  packages,
+}: SelectBoilerplateProps) => {
+  const indexFileDir = path.join(PKG_ROOT, "template/extras/src/app/page");
+
+  const usingTRPC = packages.trpc.inUse;
+  const usingTw = packages.tailwind.inUse;
+  const usingAuth = packages.nextAuth.inUse;
+
+  let indexFile = "base.tsx";
+  if (usingTRPC && usingTw && usingAuth) {
+    indexFile = "with-auth-trpc-tw.tsx";
+  } else if (usingTRPC && !usingTw && usingAuth) {
+    indexFile = "with-auth-trpc.tsx";
+  } else if (usingTRPC && usingTw) {
+    indexFile = "with-trpc-tw.tsx";
+  } else if (usingTRPC && !usingTw) {
+    indexFile = "with-trpc.tsx";
+  } else if (!usingTRPC && usingTw) {
+    indexFile = "with-tw.tsx";
   }
+
+  const indexSrc = path.join(indexFileDir, indexFile);
+  const indexDest = path.join(projectDir, "src/app/page.tsx");
+  fs.copySync(indexSrc, indexDest);
 };

cli/src/index.ts

@@ -36,7 +36,7 @@ const main = async () => {
   const {
     appName,
     packages,
-    flags: { noGit, noInstall, importAlias },
+    flags: { noGit, noInstall, importAlias, appRouter },
   } = await runCli();
 
   const usePackages = buildPkgInstallerMap(packages);
@@ -48,8 +48,9 @@ const main = async () => {
     projectName: appDir,
     scopedAppName,
     packages: usePackages,
-    importAlias: importAlias,
+    importAlias,
     noInstall,
+    appRouter,
   });
 
   // Write name to package.json

cli/src/installers/dependencyVersionMap.ts

@@ -16,6 +16,7 @@ export const dependencyVersionMap = {
   "drizzle-orm": "^0.28.5",
   "drizzle-kit": "^0.19.13",
   "dotenv-cli": "^7.3.0",
+  mysql2: "^3.6.1",
   "@planetscale/database": "^1.11.0",
 
   // TailwindCSS

cli/src/installers/drizzle.ts

@@ -13,7 +13,7 @@ export const drizzleInstaller: Installer = ({
 }) => {
   addPackageDependency({
     projectDir,
-    dependencies: ["drizzle-kit", "dotenv-cli"],
+    dependencies: ["drizzle-kit", "dotenv-cli", "mysql2"],
     devMode: true,
   });
   addPackageDependency({
@@ -55,6 +55,7 @@ export const drizzleInstaller: Installer = ({
   packageJsonContent.scripts = {
     ...packageJsonContent.scripts,
     "db:push": "dotenv drizzle-kit push:mysql",
+    "db:studio": "dotenv drizzle-kit studio",
   };
 
   fs.copySync(configFile, configDest);

cli/src/installers/index.ts

@@ -23,6 +23,7 @@ export interface InstallerOptions {
   pkgManager: PackageManager;
   noInstall: boolean;
   packages?: PkgInstallerMap;
+  appRouter?: boolean;
   projectName: string;
   scopedAppName: string;
 }

cli/src/installers/nextAuth.ts

@@ -6,7 +6,11 @@ import { type AvailableDependencies } from "~/installers/dependencyVersionMap.js
 import { type Installer } from "~/installers/index.js";
 import { addPackageDependency } from "~/utils/addPackageDependency.js";
 
-export const nextAuthInstaller: Installer = ({ projectDir, packages }) => {
+export const nextAuthInstaller: Installer = ({
+  projectDir,
+  packages,
+  appRouter,
+}) => {
   const usingPrisma = packages?.prisma.inUse;
   const usingDrizzle = packages?.drizzle.inUse;
 
@@ -23,12 +27,16 @@ export const nextAuthInstaller: Installer = ({ projectDir, packages }) => {
   const extrasDir = path.join(PKG_ROOT, "template/extras");
 
   const apiHandlerFile = "src/pages/api/auth/[...nextauth].ts";
-  const apiHandlerSrc = path.join(extrasDir, apiHandlerFile);
-  const apiHandlerDest = path.join(projectDir, apiHandlerFile);
+  const routeHandlerFile = "src/app/api/auth/[...nextauth]/route.ts";
+  const srcToUse = appRouter ? routeHandlerFile : apiHandlerFile;
+
+  const apiHandlerSrc = path.join(extrasDir, srcToUse);
+  const apiHandlerDest = path.join(projectDir, srcToUse);
 
   const authConfigSrc = path.join(
     extrasDir,
-    "src/server/auth",
+    "src/server",
+    appRouter ? "auth-app" : "auth-pages",
     usingPrisma
       ? "with-prisma.ts"
       : usingDrizzle

cli/src/installers/prisma.ts

@@ -38,6 +38,7 @@ export const prismaInstaller: Installer = ({ projectDir, packages }) => {
     ...packageJsonContent.scripts,
     postinstall: "prisma generate",
     "db:push": "prisma db push",
+    "db:studio": "prisma studio",
   };
 
   fs.copySync(schemaSrc, schemaDest);

cli/src/installers/tailwind.ts

@@ -36,8 +36,4 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
   fs.copySync(postcssCfgSrc, postcssCfgDest);
   fs.copySync(cssSrc, cssDest);
   fs.copySync(prettierSrc, prettierDest);
-
-  // Remove vanilla css file
-  const indexModuleCss = path.join(projectDir, "src/pages/index.module.css");
-  fs.unlinkSync(indexModuleCss);
 };