NextJs 13 Workshop

This workshop will have a combination of theory and practice. A simulation case will be created to show how to benefit from NextJs 13 and latest version of React, which includes making use of Server and Client Components.

Workshop Topics and duration:

Session 1 – React Server and Client Components (2 hours)

• Explain what is Server Component
• Explain what is Client Component
• Explain differences between common known React Components and new
• Code examples to show differences
• Server/Client ones.
• Explain the implications in terms of performance
• Q&A

Session 2 – Typescript (2 hours)

• Benefits of using Typescript
• Difference between using Typescript and Prop-Types 
• How to integrate it into your daily code
• Q&A

Session 3 – Nextjs 13 & Routing (2 hours) 

• Definition and anatomy of NextJs 13
  • Remarcable differences between old NextJs structure and new one
    • Routing
      • How routes and pages are now structured
      • How to define common and dynamic routes
      • Code Example
      • Q&A

Session 4 – Nextjs 13 & Rendering (2 hours) 

• Rendering
  • • • How are Server and Client Components integrated 
      • Dynamic Rendering
      • Code Example
      • Q&A

Session 5 – Nextjs 13 & Data Fetching  (2 hours) 

• Data Fetching
  • • • Caching
      • API Routes
      • Streaming and SEO
    • File Conventions: 
      • Layout, Page, Error, Loading, Head, Not Found, Route (13.2)
        
• How using Typescript on a NextJs project can be a benefit 
  • Stability
  • Compatibility out of the box
  • Code example
  • Q&A

Session 6 – Nextjs 13 & SSG/SSR  (2 hours) 

• Difference between SSG and SSR
  • How to setup them 
    • Page level
    • Layout level
  • Code example
  • Q&A

Session 7 – Server/Client Components utilities applied into NextJs 13  (2 hours)

• Server Components 
  • Utilities and Functions
    
• Client Components 
  • Hooks
  • Code example
  • Q&A

Session 8 – Styling from NextJs 13  (2 hours)

• Styling from a performance perspective – remarcable changes from older versions
  • CSS Modules
  • Tailwind CSS 
• Optimizing for:
• Fonts 
• Scripts 
  • Code example
  • Q&A

**Exempt training services in accordance with article 20.9 of VAT Law 37/1992