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.
