week 14 assignment updated

Author: sidxh

week-14/README.md

@@ -0,0 +1,44 @@
+# Week 14: Next.js Basic Assignment
+
+This week's assignment is designed to help you learn and practice key concepts of Next.js 14, including file-based routing with the App Router, navigation, layout components, static rendering, and client-side rendering with the `"use client"` directive.
+
+## Assignment Overview
+
+In this assignment, you will build a Next.js application from scratch using the App Router structure. The application will consist of three routes: Home, Static Route, and Interactive Route. You will create a navigation bar component to enable seamless navigation between these routes. The Static Route will demonstrate static rendering, while the Interactive Route will showcase client-side rendering and interactivity using the `"use client"` directive.
+
+## Learning Objectives
+
+By completing this assignment, you will gain hands-on experience and understanding of the following Next.js 14 concepts:
+
+1. **File-based Routing with App Router**: Learn how Next.js 14 uses file-based routing with the App Router, where each file in the `app` directory corresponds to a route in the application.
+
+2. **Navigation with `Link` Component**: Understand how to use the `Link` component from `next/link` to create navigation links between different routes, enabling client-side navigation without a full page reload.
+
+3. **Layout Component**: Discover how to create a layout component in Next.js 14 using `layout.tsx`, which wraps around the content of each route and allows for a consistent layout across the application.
+
+4. **Static Rendering**: Explore how Next.js performs static rendering with the static route (`static/page.tsx`), where the content is generated at build time and served as pre-rendered HTML for better performance and SEO.
+
+5. **Client-Side Rendering with "use client"**: Learn about client-side rendering using the `"use client"` directive in the interactive route (`interactive/page.tsx`), which enables interactivity and state management using React hooks like `useState`.
+   
+
+## Assignment Requirements
+
+Follow these steps to complete the assignment:
+
+1. Bootstrap a Next.js project with TypeScript.
+2. Create a `Navbar` component with three navigation links: Home, Static Route, and Interactive Route.
+3. Implement a layout component that includes the `Navbar` component and wraps around the content of each route, ensuring a consistent layout across all pages.
+4. Implement the Home route with a welcoming message and introduction to your application.
+5. Create the Static Route and display a static paragraph highlighting the benefits of static rendering in Next.js.
+6. Implement the Interactive Route with a count button that increments the count when clicked, demonstrating client-side interactivity.
+7. Ensure proper routing and navigation between the routes using the `Link` component.
+8. Style your application as desired to achieve an appealing and user-friendly interface.
+   
+Refer to the UI images attached below for visual guidance on how your application should look and function.
+
+![Home Page](https://i.postimg.cc/x1LWsq08/PICS1.png)
+
+![Server Page](https://i.postimg.cc/Sscd4YvY/PICS2.png)
+
+![Client Page](https://i.postimg.cc/2ymwSjsc/PICS3.png)
+

week-14/solution/app/interactive-page/page.tsx

@@ -0,0 +1,23 @@
+/*
+
+"use client"
+
+import { useState } from "react"
+
+const InteractivePage = () => {
+    const [count, setCount] = useState(0)
+  return (
+    <div>
+      <h1 className="font-bold text-2xl">Welcome to Interactive Page</h1>
+        <p className="my-4">This route features a count button that demonstrates the power of client-side interactivity in Next.js. Click the button and see the count go up! This interactive feature is powered by the "use client" directive in Next.js, which allows this component to be rendered on the client-side.</p>
+        <button className="border-black border-2 px-4 py-2 rounded-xl" onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+    </div>
+  )
+}
+
+export default InteractivePage
+
+
+*/

week-14/solution/app/layout.tsx

@@ -0,0 +1,33 @@
+/*
+
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Navbar from "@/components/Navbar";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Navbar />
+        <div className="flex flex-col items-center justify-between mx-auto w-[30%] py-12">
+        {children}
+        </div>
+      </body>
+    </html>
+  );
+}
+
+
+*/

week-14/solution/app/page.tsx

@@ -0,0 +1,17 @@
+/*
+
+import Navbar from "@/components/Navbar";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div>
+      <h1 className="font-bold text-2xl">Welcome to Home Page</h1>
+      <p className="my-4">🖱️ Client Page: Interactive client-side rendering in action.
+      🚀 Server Page: Optimized static content for SEO.</p>
+    </div>
+  );
+}
+
+
+*/

week-14/solution/app/static-page/page.tsx

@@ -0,0 +1,15 @@
+/*
+
+const StaticPage = () => {
+    return (
+      <div>
+        <h1 className="font-bold text-2xl">Welcome to Static Page</h1>
+        <p className="my-4">This paragraph right here is rendered statically using Next.js. By generating the content on the server at build time, Next.js ensures that search engines can easily crawl and index this page, boosting its SEO. Plus, serving static content leads to faster load times and a smoother user experience. And if I need interactivity, Next.js allows me to use the "use client" directive for specific components.</p>
+        <p>Pretty cool, right? Now navigate to the `Client Page` to check how interactivity is added in Next.js!</p>
+      </div>
+    )
+  }
+  
+  export default StaticPage
+  
+*/

week-14/solution/components/Navbar.tsx

@@ -0,0 +1,17 @@
+/*
+
+import Link from "next/link"
+
+const Navbar = () => {
+  return (
+    <div className="flex gap-20 justify-center my-20">
+      <Link className="border-2 border-gray-400 px-4 py-2 rounded-xl" href="/">Home</Link>
+      <Link className="border-2 border-gray-400 px-4 py-2 rounded-xl" href="static-page">Server Page</Link>
+      <Link className="border-2 border-gray-400 px-4 py-2 rounded-xl" href="interactive-page">Client Page</Link>
+    </div>
+  )
+}
+
+export default Navbar
+
+*/