The youtube links I watched are below

1. React JS Crash Course 2021

Timestamps:

• 0:00 - Intro & Slides
• 12:37 - Create a React app
• 14:52 - Files & folders
• 18:54 - App component & JSX
• 22:39 - Expressions in JSX
• 23:49 - Creating a component
• 27:18 - Component Props
• 28:50 - PropTypes
• 30:42 - Styling
• 34:17 - Button Component
• 37:46 - Events
• 40:18 - Tasks Component
• 41:03 - Create a list with .map()
• 43:07 - State & useState Hook
• 44:55 - Global state
• 46:52 - Task Component
• 49:30 - Icons with react-icons
• 51:41 - Delete task & prop drilling
• 55:50 - Optional message if no tasks
• 56:58 - Toggle reminder & conditional styling
• 1:03:13 - Add Task Form
• 1:06:16 - Form input state (controlled components)
• 1:09:18 - Add task submit
• 1:14:36 - showAddTask state
• 1:15:58 - Button toggle
• 1:19:33 - Build for production
• 1:21:51 - JSON Server
• 1:25:53 - useEffect Hook & Fetch tasks from server
• 1:30:13 - Delete task from server
• 1:31:51 - Add task to server
• 1:35:15 - Toggle reminder on server
• 1:39:15 - Routing, footer & about

2. Next.js Crash Course 2021

Timestamps:

• 0:00 - Intro & Slides
• 6:52 - Getting Setup with create-next-app
• 8:23 - Files & Folders
• 11:37 - Pages & Routing
• 13:14 - Head
• 16:05 - Layouts & CSS Modules
• 20:56 - Nav Component & Link
• 23:34 - Create a Header
• 25:05 - Styled JSX
• 27:46 - Custom Document
• 31:16 - Data Fetching
• 32:02 - getStaticProps()
• 33:58 - Showing Data
• 40:15 - Nested Routing
• 42:46 - getServerSideProps()
• 46:00 - getStaticPaths()
• 49:47 - Export a Static Website
• 53:18 - API Routes
• 59:24 - Using the API Data
• 1:03:48 - Custom Meta Component

3. Advanced Next.js Course | Learn Next.js in 2021

Timestamps

• 00:00 codedamn Intro
• 01:19 Introduction
• 02:28 Environment Variables
• 13:18 Managing Env Files
• 19:36 getServerSideProps Part 1
• 27:16 getServerSideProps Part 2
• 38:13 getServerSideProps Part 3
• 44:59 getStaticProps Part 1
• 50:37 getStaticProps Part 2
• 01:05:00 getStaticProps Part 3
• 01:06:59 getStaticPaths
• 01:19:45 Preview Mode
• 01:30:49 Dynamic Loading Part 1
• 01:37:33 Image Component Part 1
• 01:45:41 Image Component Part 2
• 01:52:38 Outro

4. Birlikte Next.js Öğreniyoruz

5. Learning Next.js Page

• When to Use Static Generation v.s. Server-side Rendering

  We recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request. You should ask yourself: "Can I pre-render this page ahead of a user's request?" If the answer is yes, then you should choose Static Generation. On the other hand, Static Generation is not a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request. In that case, you can use Server-side Rendering. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate frequently updated data.

  Static Generation with Data using getStaticProps

      export default function Home(props) { ... }
  
      export async function getStaticProps() {
        // Get external data from the file system, API, DB, etc.
        const data = ...
  
        // The value of the `props` key will be
        //  passed to the `Home` component
        return {
          props: ...
        }
      }

  Note: In development mode, getStaticProps runs on each request instead.

• How to deploy React App to GitHub Pages