nextjs

nextjs

hola

fallback key

---

---

---

---

---

---

---

---

---

---

fallback "blocking" is same as fallback:false , only differenece is that instead of showing fallback page we will not see any new content on UI when page is generated on the server

---

---

Incremental Static Regeneration

---

Inspecting ISR build

Server Side rendering

---

---

---

---

---

---

---

---

SSR with dynamic parameters

getServerSideProps context

one of the limitation of static generation is that you don't get access of incoming request (request, cookie, header etc), that prevent you from fetching data that is user specific
but SSR will have access to incoming request

Client side data fetching

---

---

Pre-rendering + client side data fetching

---

---

if you want to bookmark the page:

---

Pre rendering and Data fetching summary

---

API Routes

API routes are also file/folder baised

---

---

---

dynamic api routes

Catch all api routes

API route summary

Styling section

---

App Layout

but if you want only Footer for some page (let say About page) then:

---

Head component

Image component

next js optimize images as well

---

Absolute import

---

---

module paths

---

static html export

---

"next export" will generate "out" dir with all static html in it, then we can put it in CDN (static server)
for this we cannot use next/image and fallback should always be "false"

typescript support

tsconfig.json is the config file for typescript

---

redirect

maybe that page is under maintainenece or maybe it is permanent shifted to other page (but user might have bookmarked old page)

AUTHENTICATION IN NEXTJS

Setup

---

setup SSO for github

https://www.youtube.com/watch?v=Aiqzfmy9A_4&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH&index=68

signin and signout from client

---

---

actually <Link href="" /> is not needed, you can use either Link or signIn function, or both
you can check cookie, you will see next auth session token
if you pass signIn("github") , github string inside then if you are already loggedin in github then it will auto login you on click of signin

Client side authentication

---

---

---

---

above code is deplricated, new one is

in header.jsx

import classes from "../../../styles/Header.module.css";
import { signIn, signOut, useSession } from "next-auth/react";

function Header() {
  const sessionDetails = useSession();
  const { data, status } = sessionDetails;
  console.log({ data });
  return (
    <div className={classes.header}>
      This is header
      <hr />
      {status === "authenticated" && status !== "loading" && (
        <button
          onClick={() => {
            signIn("github");
          }}
          type="button"
        >
          SIGN OUT
        </button>
      )}
      {status === "unauthenticated" && status !== "loading" && (
        <button
          onClick={() => {
            signOut();
          }}
          type="button"
        >
          SIGN IN
        </button>
      )}
      {status === "loading" && <div>Loading...</div>}
    </div>
  );
}

export default Header;

in _app.js

import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

---

---

in [...nextauth].js

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
});

---

---

Securing pages client side

Server side authentication

authentication inside getServerSideProps function

---

Securing pages server side

securing api routes

Connecting to DB

---

setup mongodb atlas

https://www.youtube.com/watch?v=H4ptrFimcSM&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH&index=76

deploying nextjs app to versel

https://www.youtube.com/watch?v=KmxAH7ng8Qw&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH&index=79