Cache Components, REad Env Values, Images, Font, Sitemap Tutorial added

Author: PrathameshDhande22

NextJS/next-tutorial/.env

@@ -0,0 +1,3 @@
+DATABASE_URL="file:./dev.db"
+ANALYTICS_URL="prathamesh.dhande"
+NEXT_PUBLIC_ANALYTICS_URL="prathamesh.ananlytics"

NextJS/next-tutorial/.gitignore

@@ -30,8 +30,6 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
-.env*
 
 # vercel
 .vercel

NextJS/next-tutorial/next.config.ts

@@ -2,7 +2,8 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
-  reactCompiler: true
+  reactCompiler: true,
+  cacheComponents: true,
 };
 
 export default nextConfig;

NextJS/next-tutorial/src/app/article/[articleId]/page.tsx

@@ -1,11 +1,14 @@
-import ArticleCard from "@/components/ArticleCard";
+import dynamic from "next/dynamic";
 
 // creating the type safety for the the Article Search Params
 interface ArticleDetailsPageProps {
   params: Promise<{ articleId: string }>;
   searchParams: Promise<{ lang: "en" | "es" | "fr" }>;
 }
 
+// Dynamic import component or lazy load the component
+const ArticleCard = dynamic(() => import("@/components/ArticleCard"));
+
 const ArticleDetailsPage = async ({
   params,
   searchParams,

NextJS/next-tutorial/src/app/blog/page.tsx

@@ -1,4 +1,6 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
+import Image from "next/image";
+import BlogImage from "@/assets/images.jpg";
 
 // defining the title to override the parent title template
 export const metadata: Metadata = {
@@ -7,11 +9,19 @@ export const metadata: Metadata = {
   },
 };
 
+// defining the viewport
+export const viewport: Viewport = {
+  colorScheme: "dark",
+};
+
 export default function Blog() {
   return (
     <div>
       <h1>Blog</h1>
       <p>Welcome to the blog page!</p>
+
+      {/* Using the nextjs Image Component */}
+      <Image src={BlogImage} alt="Blog image"></Image>
     </div>
   );
 }

NextJS/next-tutorial/src/app/cachepg/page.tsx

@@ -0,0 +1,23 @@
+export default async function Page() {
+  "use cache";
+
+  // Execute once, then cached for all requests
+  const random = Math.random();
+  const random2 = Math.random();
+  const now = Date.now();
+  const date = new Date();
+  const uuid = crypto.randomUUID();
+  const bytes = crypto.getRandomValues(new Uint8Array(16));
+
+  return (
+    <div>
+      <p>
+        {random} and {random2}
+      </p>
+      <p>{now}</p>
+      <p>{date.getTime()}</p>
+      <p>{uuid}</p>
+      <p>{bytes}</p>
+    </div>
+  );
+}

NextJS/next-tutorial/src/app/comments/route.ts

@@ -12,6 +12,8 @@ export async function GET(request: NextRequest) {
     headers: {
       "x-query": String(query),
       "X-Powered-By": "Prathamesh Dhande",
+      // Using the Env values in the NextJS
+      Analyticcs: String(process.env.ANALYTICS_URL),
     },
   });
 }

NextJS/next-tutorial/src/app/dbfetch/page.tsx

@@ -1,9 +1,17 @@
 import { deleteProduct } from "@/actions/product";
 import { prisma } from "@/prisma.client";
+import { cacheLife } from "next/cache";
 import Form from "next/form";
 import Link from "next/link";
 
 const DBFetch = async () => {
+  // caching these content
+  "use cache";
+  cacheLife({
+    stale: 60,
+    revalidate: 60,
+    expire: 60,
+  });
   // Accessing the DB prisma client on the server side page only
   const products = await prisma.product.findMany({
     orderBy: {

NextJS/next-tutorial/src/app/fetcher/page.tsx

@@ -17,6 +17,8 @@ const FetcherPage = () => {
   });
   return (
     <div>
+      {/* Using the Browser based ENV value */}
+      {process.env.NEXT_PUBLIC_ANALYTICS_URL}
       <div>
         {isLoading ? (
           <div>Loading...</div>

NextJS/next-tutorial/src/app/layout.tsx

@@ -3,6 +3,9 @@ import "./globals.css";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import Provider from "@/components/Provider";
+import { Suspense } from "react";
+// Importing the font with its font name
+import { Edu_NSW_ACT_Cursive } from "next/font/google";
 
 // Title metadata configuring title to be used by the child routes also
 export const metadata: Metadata = {
@@ -15,19 +18,29 @@ export const metadata: Metadata = {
     "A simple NextJS tutorial to get started with NextJS 13 and the new app directory structure.",
 };
 
+// Declaring the Font
+const cursivefont = Edu_NSW_ACT_Cursive({
+  subsets: ["latin"],
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    // add to include as the classname
+    <html lang="en" className={cursivefont.className}>
       <body>
-        <Header></Header>
+        <Suspense fallback={<div>Loading...</div>}>
+          <Header></Header>
+        </Suspense>
         {/* Pass the Context Provider or any client side provider in these way */}
-        <Provider>
-          <main>{children}</main>
-        </Provider>
+        <Suspense fallback={<div>Loading....</div>}>
+          <Provider>
+            <main>{children}</main>
+          </Provider>
+        </Suspense>
         <Footer />
       </body>
     </html>