Merge pull request #3 from A7med3bdulBaset/v-1-1-1

Version 1.2

README.md

@@ -1,6 +1,6 @@
 # Next.js Starter Template
 
-This template is up to Next.js `13.4.17`. Please run `npm update --latest` after creating your project.
+This template is up to Next.js `13.4.19`. Please run `npm update --latest` after creating your project.
 
 [![CI-check](https://github.com/A7med3bdulBaset/next-template/actions/workflows/CI.yml/badge.svg)](https://github.com/A7med3bdulBaset/next-template/actions/workflows/CI.yml)
 
@@ -50,6 +50,16 @@ This template uses `pnpm` as the package manager. If you want to use other packa
 -  `typecheck`: Check types
 -  `ci-check`: Run all checks
 
+### To install a component from `shadcn/ui` and `radix-ui`:
+```sh
+pnpm shadcn-ui add <component> [--overwrite]
+```
+
+## TODOs:
+- [ ] Configure `next-auth`
+- [ ] Configure `Prisma`
+- [ ] Configure `Husky`, `lint-staged`
+
 ## Inspiration
 
 Inspired by [next-template](https://github.com/shadcn/next-template) by [Shadcn](https://github.com/shadcn)

env.mjs

@@ -1,10 +1,25 @@
 // @ts-check
 
 import { createEnv } from '@t3-oss/env-nextjs'
-// import { z } from 'zod'
+import { z } from 'zod'
 
 export const env = createEnv({
-  server: {},
+  server: {
+    // NEXTAUTH_SECRET: z.string().min(32),
+  },
   client: {},
-  runtimeEnv: {}
-})
+  runtimeEnv: {
+    // NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
+  }
+})
+
+/**
+ * # How to use this?
+ * 1. write your env variables in the `.env.local` file
+ * 2. add a schema for the env variables in the `env.mjs` file
+ * 3. use the `env` object in your code
+ * ```js
+ * import { env } from "@env";
+ * console.log(env.NEXTAUTH_SECRET);
+ * ```
+ */

next.config.js

@@ -1,4 +1,21 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  experimental: {
+    serverActions: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
+
+/** 
+ * To make your app PWA:
+ * 1. Run `pnpm add @imbios/next-pwa`
+ * 2. Uncomment the code below
+ */
+
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+// const withPWA = require("@imbios/next-pwa")({
+// 	dest: "public",
+// });
+// module.exports = withPWA(nextConfig);

package.json

@@ -22,7 +22,7 @@
 		"clsx": "^1.2.1",
 		"eslint-plugin-prettier": "^5.0.0",
 		"lucide-react": "^0.248.0",
-		"next": "^13.4.17",
+		"next": "^13.4.19",
 		"next-themes": "^0.2.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
@@ -48,6 +48,7 @@
 		"tailwind-merge": "^1.13.2",
 		"tailwindcss": "3.3.2",
 		"tailwindcss-animate": "^1.0.6",
-		"typescript": "^5.1.6"
+		"typescript": "^5.1.6",
+		"zod": "^3.22.2"
 	}
 }

src/app/actions.ts

@@ -0,0 +1,8 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+// This is just an example of a serverAction
+export async function revalidate(path: `/${string}`) {
+  return revalidatePath(path);
+}

src/app/error.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center space-y-4">
+      <h1 className="text-7xl font-extrabold">Error</h1>
+      <h2 className="text-2xl font-semibold">
+        {process.env.NODE_ENV === "development"
+          ? error.message
+          : "Something went wrong"}
+      </h2>
+      <div className="space-x-2">
+        <Link href="/" className={buttonVariants()}>
+          Go Home
+        </Link>
+        <Button variant="outline" onClick={() => reset()}>
+          Try Again
+        </Button>
+      </div>
+    </div>
+  );
+}