Online Workshop - "Next.js 13: What's Going On?"

Demo code used on an online workshop conducted on the 20th May 2023 by Biztech Morocco, where we discussed the significant updates and enhancements introduced in Next.js 13.

📼 Livestream

You can find the recorded livestream here in Moroccan Darija 🇲🇦.

📄 Slides

You can find the slides here.

📌 Key Topics Discussed

• App Directory: The new file-system based configuration system. We examined how the new App directory compared to previous versions (pages directry).

• Routing: Discussed the changes and enhancements to routing with Next.js 13, including static routing, dynamic routing, route groups, and catch-all routes.

• Server Components: A deep dive into how Server Components are implemented by default in Next.js 13 and how they can deliver a better user experience while maintaining optimum performance, also comparing them with Client Components.

• Loading & Errors: How Next.js 13 has improved the UX during the loading and error states.

• Layouts: The shift in how layouts are handled, providing more flexibility and better component isolation.

• SEO Best Practices: An overview of SEO best practices with Next.js 13, focusing on how the framework supports better SEO out of the box, how to generate dynamically sitemaps, metadata, and an overview of open graph images.

• API Route Handlers: A detailed examination of how API Route Handlers have changed, emphasizing the simplification of backend to frontend communication.

• Deploy to Vercel: A step-by-step guide on how to deploy a Next.js 13 application on Vercel, and the benefits that Vercel offers.

We also compared how these topics were handled in previous versions of Next.js, to understand the progression and the advantages of the newer version.

---

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.