Scribd
Upload
18 views

Notes on NextJS 13

Uploaded by

ela114
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
18 views

Notes on NextJS 13

Uploaded by

ela114
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 3

NextJS 13

There is app directory and 70% of application will be there and 30% of application
will be outside of this app directory.
app/Page.tsx index.js of the app
./tailwind.config.ts tailwind configuration theme color …

In NextJS there is file based routing

url ourdomain.com/ourroute/route
app <ourroute>/<route>/page.tsx

layout.tsx skeleton of the app for header, navbar ,


footer

Navigation In NextJS

We use <Link> component for navigation and we use use


Route for programmatic navigation

Rendering
Client side rendering: user make request to the server
and the server responses a data with a java-script bundle
and java-script bundle renders data received from the
server.
Server side rendering: when user makes request to the
server then the server responds the whole HTML page and
necessary data to the client there is no parse or bundle.
In NextJS we have both server side and client side
component,
In NextJS server side component is default component
dependency's stay in server, better performance.

Client component to use client component we use


“use client” at the top of the code.tsx,use least amount
of client component
Which component should be server and which component
should be client?

Client component can’t render the server component but


the revers is true.

Nested Component and Nested Routing can be done by


page.tsx and layout.tsx

Fetching data can be done in both client and server


rendering but when we fetch data from server component we
should pass data to the client component.

To get params value


Example:- ourdomain.com/search?q=Los-Angeles

page.tsx
const = Search({searchParams})
{ console.log(searchParams.q) }
We can add loading state and UI by adding loading.tsx to
the root app folder.

We cann add error handling page and notfound page as


follow
page.tsx
index.tsx
error.tsx
not-found.tsx

and we add interactive actions on server rendering


component using client component rendering.

You might also like