feat: warn for incompat nextauth url and port

.changeset/cuddly-suns-admire.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+feat: add a warning if nextuath url doens't match the port in dev

cli/src/helpers/createProject.ts

@@ -40,6 +40,7 @@ export const createProject = async ({
     scopedAppName,
     noInstall,
     appRouter,
+    packages,
   });
 
   // Install the selected packages
@@ -55,12 +56,6 @@ export const createProject = async ({
 
   // 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 {

cli/src/helpers/scaffoldProject.ts

@@ -14,6 +14,8 @@ export const scaffoldProject = async ({
   projectDir,
   pkgManager,
   noInstall,
+  appRouter,
+  packages,
 }: InstallerOptions) => {
   const srcDir = path.join(PKG_ROOT, "template/base");
 
@@ -90,6 +92,15 @@ export const scaffoldProject = async ({
     path.join(projectDir, ".gitignore")
   );
 
+  // Select next.config.mjs
+  const configDir = path.join(PKG_ROOT, "template/extras/config/next-config");
+  let filename = packages?.nextAuth.inUse ? "with-auth-" : "with-";
+  filename += appRouter ? "appdir.mjs" : "pagedir.mjs";
+  fs.copyFileSync(
+    path.join(configDir, filename),
+    path.join(projectDir, "next.config.mjs")
+  );
+
   const scaffoldedName =
     projectName === "." ? "App" : chalk.cyan.bold(projectName);
 

cli/template/base/src/env.mjs

@@ -8,6 +8,7 @@ export const env = createEnv({
    */
   server: {
     NODE_ENV: z.enum(["development", "test", "production"]),
+    PORT: z.coerce.number().default(3000),
   },
 
   /**
@@ -25,6 +26,7 @@ export const env = createEnv({
    */
   runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,
+    PORT: process.env.PORT,
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
   },
   /**

cli/template/extras/config/next-config/with-auth-appdir.mjs

@@ -0,0 +1,21 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+import { env } from "./src/env.mjs";
+
+// Warn if local development URL doesn't match with the active port
+const nextAuthPort = new URL(env.NEXTAUTH_URL).port;
+if (env.NODE_ENV === "development" && nextAuthPort !== String(env.PORT)) {
+  throw new Error(
+    [
+      `❗ NEXTAUTH_URL (${env.NEXTAUTH_URL}) doesn't match with PORT (${env.PORT}).`,
+      `Either update your the URL in your .env file or make sure to run your dev server on port ${nextAuthPort}.`,
+    ].join(" ")
+  );
+}
+
+/** @type {import("next").NextConfig} */
+const config = {};
+
+export default config;

cli/template/extras/config/next-config/with-auth-pagedir.mjs

@@ -0,0 +1,33 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+import { env } from "./src/env.mjs";
+
+// Warn if local development URL doesn't match with the active port
+const nextAuthPort = new URL(env.NEXTAUTH_URL).port;
+if (env.NODE_ENV === "development" && nextAuthPort !== String(env.PORT)) {
+  throw new Error(
+    [
+      `❗ NEXTAUTH_URL (${env.NEXTAUTH_URL}) doesn't match with PORT (${env.PORT}).`,
+      `Either update your the URL in your .env file or make sure to run your dev server on port ${nextAuthPort}.`,
+    ].join(" ")
+  );
+}
+
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: true,
+
+  /**
+   * If you are using `appDir` then you must comment the below `i18n` config out.
+   *
+   * @see https://github.com/vercel/next.js/issues/41980
+   */
+  i18n: {
+    locales: ["en"],
+    defaultLocale: "en",
+  },
+};
+
+export default config;

cli/template/extras/src/env/with-auth-db.mjs

@@ -17,6 +17,7 @@ export const env = createEnv({
     NODE_ENV: z
       .enum(["development", "test", "production"])
       .default("development"),
+    PORT: z.coerce.number().default(3000),
     NEXTAUTH_SECRET:
       process.env.NODE_ENV === "production"
         ? z.string()
@@ -49,6 +50,7 @@ export const env = createEnv({
   runtimeEnv: {
     DATABASE_URL: process.env.DATABASE_URL,
     NODE_ENV: process.env.NODE_ENV,
+    PORT: process.env.PORT,
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
     DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,

cli/template/extras/src/env/with-auth.mjs

@@ -10,6 +10,7 @@ export const env = createEnv({
     NODE_ENV: z
       .enum(["development", "test", "production"])
       .default("development"),
+    PORT: z.coerce.number().default(3000),
     NEXTAUTH_SECRET:
       process.env.NODE_ENV === "production"
         ? z.string()
@@ -41,6 +42,7 @@ export const env = createEnv({
    */
   runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,
+    PORT: process.env.PORT,
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
     DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,

cli/template/extras/src/env/with-db.mjs

@@ -17,6 +17,7 @@ export const env = createEnv({
     NODE_ENV: z
       .enum(["development", "test", "production"])
       .default("development"),
+    PORT: z.coerce.number().default(3000),
   },
 
   /**
@@ -35,6 +36,7 @@ export const env = createEnv({
   runtimeEnv: {
     DATABASE_URL: process.env.DATABASE_URL,
     NODE_ENV: process.env.NODE_ENV,
+    PORT: process.env.PORT,
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
   },
   /**