The React Framework for the Web -A Full Stack Framework

Pre-requisites

1. Understanding of FrontENd

2. React

Why NextJS?

1. In React, we have to maintain two separate Folder Backend + FrondEnd

2. React Does not provide ( Router ) out of the Box, minor

3. React Is not SEO-optimized

4. waterfall problem

except waterfall, all are self-explanatory,

In waterfall problem , we send request and serve one after other

1. First HTML page will be served

2. Now HTML will server Those JS/assets/css

3. Then js will call the api , and you will get your response

What is NextJS offering ??

1. server-side rendering: Ger rid of SEO

2. Single Codebase ( FrontEnd + Backend )

3. File-Based Routing (Folder )

4. Easy to Deploy ( Maintain by Vercel Team )

Let's Start working with NextJS

npx create-next-app@latest
// select your choices

How Does Routing Work in React?

We user react-router-dom package, to work with Router

function App(){

    return (
        <BrowserRouter>
            <Routes>
                <Route path="/signup" element={<Signup/>} />
                <Route path="/login" element={<Login/>} />
            </Routes>
        </BrowserRouter>
    )
}

Routing in Next.js

1. let's add a new folder in app > signup

2. this folder always accepts page.TSX

    // app/signup
    export default function Signup() {
        return (
          <div>
            Create Account
          </div>
        );
      }
   

    // to run the nextjs app
    npm run dev
    1. http://localhost:3000/
    it serves the Default Page.TSX page
   
    2. http://localhost:3000/signup
        : inside signup Folder / page.TSX page will be serve
        : yes, this is called file base routing 
         [ it routes the folder and page.TSX will be server]
   

Layout in NextJS

So, here also we have the default layout.TSX with page.TSX

Basically Layout page will always be rendered always the top of the Page.TSX irrespective of Folder or routing.

1. Default Route 
[ note: In Default Route Layout.tsx will be render to all the Route ]
    : page.tsx
    : layout.tsx
[ First Layout will render and then page.tsx within the same page ]
page.tsx will render

2. if SignUp Folder 
[ note: only page.tsx will have this layout on top ]
    : layout.tsx -> 
    : page.tsxt -> 
[First layout.tsx will render and then page.tsx within the same page]

Q1. how do you keep if you want the same layout in two pages or routes

// 1. make them a parent root folder

-> user
      ->SignUp
            ->page.tsx
      ->SignIn 
            ->page.tsx
->layout.tsx
[ note: Here layout will be render both the routes singup/signin ]
http://localhost:3000/user/signup
http://localhost:3000/user/signin

Q2. How to merge two routes

// 1. make them a parent root folder
// 2. And just Add here, () to folder name
-> (user) [note: it will skip the user route and acces next route ]
      ->SignUp
            ->page.tsx
      ->SignIn 
            ->page.tsx
->layout.tsx
[ note: Here layout will be render both the routes singup/signin ]
http://localhost:3000/signup
http://localhost:3000/signin

How Do Components Work in NextJS?

1. Create a new folder component in the root folder

2. Add component SignUp.tsx

    export function Signin() {
        return <div>
            Login Here
        </div>
    }    
   
    // How to use this component, import and use like this
    // Wherever you want to use this component
    import { Signin} from "@/components/Signin";
   
    export default function Signin() {
        return <SigninComponent />
    }