Next.js - rs-hash/Senior GitHub Wiki

• Framework for building super fast, SEO friendly apps
• Framework - Libraries + tools + conventions
• Node.js Runtime to run JS on the server
• Frontend + Backend - Next.js

Normally for a client-side react application, when a user requests a web page, the server sends an empty HTML file with one or more script tags for loading the React code and other project dependencies. The browser parses the HTML file, downloads the Javascript files, and uses the client JavaScript to render the web page.

Server components execute on the server-side. They are not included in the client JavaScript bundle. Thus, reducing the client JavaScript bundle size.

Next.js allow us to render our components on the server and send the rendered HTML to the client it makes app faster and SEO friendly

In server-side rendering, the server generates the HTML for a page, which is then sent to the client. This is in contrast to client-side rendering, where the HTML is generated on the client-side, using JavaScript to render content in the browser.

Add 'use client' to make it client component Only components that need to rerender can be client components

Next.js also allows us to prerender some pages & components that have static data, we just render them once and serve the whenever needed

const result = await fetch('..', {cache: 'no-store'})
const result = await fetch('..', {next: {revalidate: 10} }) // get freshdata from backend every 10 seconds

Server Rendering can be static( build time) & dynamic (render time )

• /posts -> create a folder called posts and add page.tsx
• [id] -> dynamic routes
• layout.tsx -> main layout which can have header, footer components
• Use instead of href, so it doesn't rerender and load again
• Loading.tsx -> used for loading, Next.js uses Loading.tsx by default
• or we can also use the below for lazy loading

<Suspense fallback="Loading...">
 <my-component></my-component>
</Suspense>

• p-number ( padding )
• m-5 ( margin in rem )
• text-center
• text-4xl
• px-number ( horizontal )
• py-number vertical
• font-bold
• hover:

import Image from "next/image"
import Link from "next/link"