share_prompt_june.md

Share Prompt tutorial

To create a next react app

$ npx create-next-app@latest ./

Only use Tailwind

The App folder in Nextjs

The layout.js is the entry point of our application. all the component are wrapped within it as it children

Any component on the layout will be shared among all the pages. It is like elementor template

The layout consist of the header, footer, navbar

Using the client side components

To render on the client side use client is used at the top of the page

Anytime, you use useState or useEffect it should be on the client side

Creating Route in Nextjs

Just create a folder under app, then create the js file inside the folder. Then get the folder by forward slash

Server component and client component

All component created in the app compponent are react server component

Compound Page

Compound page can have layout.js between them so that they can share the components

Error handling

An application should catch error gracefully and present it to the user gracefully

A error.js must be client component and it should gracefully present the error

Create a loading.js to load a spinner before the page calls neccessary API

Dynamic url

The folder name must be in square bracket eg [heyboy] for a dynamic url

Data Fetching in React13 and Next 18

• Server side rendering
• Static side generation
• Incremental static generation

The API Usage

Keep the API logic in the api folder

You create a folder for each of the api logic, then use route.js for each of the file