Marius Obert
From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners
#1about 2 minutes
Why use meta-frameworks like Next.js and Tailwind CSS
Meta-frameworks like Next.js offer benefits such as improved SEO and performance, while Tailwind CSS simplifies styling without writing traditional CSS.
#2about 2 minutes
Understanding the traditional Next.js Pages Router
The Pages Router uses a file-based system where each TSX file in the `pages` directory corresponds to a specific URL route.
#3about 4 minutes
Introducing the new App Router in Next.js 13
Next.js 13 introduces the App Router, which uses a new directory structure and defaults to React Server Components for server-side rendering.
#4about 4 minutes
Rapidly styling a user interface with Tailwind CSS
Use Tailwind's utility classes directly in your HTML to handle layout, colors, sizing, and even animations without leaving your component file.
#5about 4 minutes
Building API endpoints with the new App Router
API endpoints in the App Router are created by adding a `route.ts` file inside a named directory within the `app/api` folder.
#6about 5 minutes
Creating new pages with the App Router's conventions
New pages are created by making a new folder for the URL path and placing a `page.tsx` file inside it to define the component.
#7about 5 minutes
Implementing backend logic with Next.js Server Actions
Server Actions allow you to run secure, server-side code directly from your components in response to user events like form submissions.
#8about 3 minutes
Recap of Next.js 13 features and Q&A
A summary of the key features covered, including the App Router and Server Actions, followed by questions on VS Code extensions and using Next.js for PWAs.
Related jobs
Jobs that call for the skills explored in this talk.
Featured Partners
Related Videos
GraphQL + Apollo + Next.js: A Lovely Trio
Josh Goldberg
Microfrontends at Scale
Josh Goldberg
Build Your Own Subscription-based Course Platform
Dávid Lévai
Teini - an extremely small webshop leveraging awesome and free tech
Christian K.
Building Interactive Async UI with React 19 and Ariakit
Aurora Scharff
Level up your Angular CSS with Tailwind CSS
Patricio Vargas
Level up your Angular CSS with Tailwind CSS
Patricio Vargas
Next, Nest, Nuxt… Nust?
Marius Obert
From learning to earning
Jobs that call for the skills explored in this talk.
Frontend Developer m/w/d - Next.js / React / TailwindCS / Vercel
Marketingexperten
Leipzig, Germany
€12-42K
React
Next.js
Mid-Level Web Developer (Next.js + TypeScript)
Neli Arabi GmbH
Berlin, Germany
Intermediate
API
CSS
XML
GIT
REST
+3
Senior Frontend Developer - Next.js / TypeScript
OOTI
Paris, France
Senior
React
Next.js
Cypress
JavaScript
TypeScript
+1
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Municipality of San Sebastian, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Lleida, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Municipality of Marbella, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Municipality of Vitoria-Gasteiz, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3





