Notes 📋

Video reference: Click here!

Tutorial teaching how to create a movie list app using Next.js 13 and Tailwind CSS.

Here goes the notes that i took while watched the video

This directory is a container for all the pages and components of the application.

app directory

All the pages goes inside this directory.
The pages are composed by a page.tsx file that contains the JSX code, this is the main files.
Each page can have a different layout, so we can create a layout.tsx file inside the page directory. So, if you want to use a different layout for a page, you can create a layout.tsx file inside the page directory.
The layout.tsx file is a component that will be used as a wrapper for the page.tsx file.

data fetching

Always use Server Components (SSR) when you need to fetch data from an API.
If you need to fetch data from an API, you would use getServerSideProps function. But, in Next 13, we have a new feature called Server Components.
This feature is a new way to fetch data from an API. You only need to make the component async, and fetch the data at the component level.

IMPORTANT

Server components don't work with useState, useEffect, onClick events, etc.
This only works if we "use client". That transform this component in a client-side component.