notes.txt

<!-- loading components can be used directly it acts as shimmer  -->
<!-- Error layout component must be client component  -->
<!-- "use client"; write this on top of the file  -->
<!-- you can create custom 404 error page using not-found.js page  -->

<!-- Styles  -->

<!-- to avoid conflicts in between components css and global css if you are using same class name nextjs provides us with .module.css to know more u can check i have used container class in both navbar and body  -->
<!--  usePathname is a Client Component hook that lets you read the current URL's pathname. -->

# How TO add Images in the project

# you can add them in public folder and by default nextjs couldn't take images from external sources for this u have to add config code in next.config.mjs file

pages are created in app folder and components are created separatley

-> Hyderaton in nextjs : For example if you are using Math.random() on your website and console it value will differ you can check on developers console and if the Math.random is rendering on website there it has different value. So to avoid this we can use useEffect method

    - Second Method (Hyderation)

    HyderationTest.js
        "use client";

        const HyderationTest=()=>{
            const a = Math.random();
            return <h1>{a}</h1>
        }
    export default HyderationTest;

    PostCard.js
        import {dynamic} from "next/dynamic";
        const PostCard=()=>{

        const HyderdationTestNoSSR = dynamic(()=>import("@/components/HyderationTest.js"),{ssr:false})

            return <HyderdationTestNoSSR/>
        }

-> what if i wrapped client component around server component ? 
    it still be a server side component.

                                    NAVIGATION

-> When u write <Link href="/"> Home </Link> home page is allready prefetched when u click on home link within milliseconds home page renders. - if u more than one link it affects the performance of a website to avoid prefetch of all the page u can do <Link href="/" prefetch={false}> Home </Link>

-> useRouter hook provide u wide range of variety that can be used on the browser like go back, go to next page, refresh the page which we get it from "next/navigation"

            const router = useRouter();

            router.push("/");
            router.replace("/ ")
            router.refresh();
            router.back();
            router.forward()

-> usePathName won't give query url, Thinking what is query URL ? ex - blog/blogpost-1
to get the query parameter we use useSearchParams()

above is for client side components for Server side components you can use params to get the URLS

# Data fetching ----------------------

by default nextjs cache the api calls so that next time u comeback to the same page it loads quickly this increases the performance of the website if you want to change this default behaviour of cachhing then
const response = await fetch("https://jsonplaceholder.typicode.com/posts",{cache:"no-store"})

import PostCard from "@/components/postCard/PostCard";
import styles from "./blog.module.css";

// FETCH DATA FROM API

// const getData = async () => {
// const res = await fetch("https://jsonplaceholder.typicode.com/posts");

// if (!res.ok) {
// throw new Error("Something went wrong");
// }
// return res.json();
// };

// const BlogPage = async () => {
// // FETCH DATA WITH AN API
// const posts = await getData();

// // FETCH DATA WITHOUT AN API
// const posts = await getPosts();

// return (

// <div className={styles.container}>
// {posts.map((post) => (
// <div className={styles.post} key={post.id}>
// <PostCard post={post} />
// </div>
// ))}
// </div>
// );
// };

// export default BlogPage;

// it refreshes the page ervery 1hr if we use revalidate  
const response = await fetch("https://jsonplaceholder.typicode.com/posts",{next:{revalidate:3600}})

// we also show how to fetch the data from API and without using an API

// Making Application FullStack using MangooDB Atlas and Mangoos
        // - I Signedup to MangoDB Account 
        // - created Cluster 
        // - went to database access and check the password 
        // - went to Network Access changes the IP address 
        // - went to Database  -> connect to NodeJS options 
        // - we get connection code that we need to copy and paste it in .env file 
        // - Now we arre going to use mangoose to use install it using "npm i mongoose@8.0.0"
        // - Now we have to make a connection to our code 
        // created a utils.js file inside lib and written everything and then started creating models.js 
        // - See how to create models from mangoose website 
        // - we have created user schema and post schema   
        // - go to mongodb atlas and click on browse collection 
        // - created a user and ppost here