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.
ROSEN Technology and Research Center GmbH
Osnabrück, Germany
Senior
TypeScript
React
+3
Picnic Technologies B.V.
Amsterdam, Netherlands
Intermediate
Senior
TypeScript
Angular
+1
Matching moments
01:32 MIN
Organizing a developer conference for 15,000 attendees
Cat Herding with Lions and Tigers - Christian Heilmann
03:17 MIN
Selecting strategic partners and essential event tools
Cat Herding with Lions and Tigers - Christian Heilmann
04:49 MIN
Using content channels to build an event community
Cat Herding with Lions and Tigers - Christian Heilmann
04:57 MIN
Increasing the value of talk recordings post-event
Cat Herding with Lions and Tigers - Christian Heilmann
02:44 MIN
Rapid-fire thoughts on the future of work
What 2025 Taught Us: A Year-End Special with Hung Lee
03:39 MIN
Breaking down silos between HR, tech, and business
What 2025 Taught Us: A Year-End Special with Hung Lee
04:22 MIN
Why HR struggles with technology implementation and adoption
What 2025 Taught Us: A Year-End Special with Hung Lee
11:10 MIN
The only frontend stack that truly matters
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
Featured Partners
Related Videos
25:22Building Interactive Async UI with React 19 and Ariakit
Aurora Scharff
31:41Level up your Angular CSS with Tailwind CSS
Patricio Vargas
47:46Level up your Angular CSS with Tailwind CSS
Patricio Vargas
26:30Next, Nest, Nuxt… Nust?
Marius Obert
29:04Why HTMX is crushing React, Vue & Svelte.
Felix Eckhardt & Benedikt Stemmildt
26:00To New Frontiers: The Future of Frontend Development
Rainer Hahnekamp
25:53Build and Deploy a Fullstack App with Open Source Tooling
Noam Honig
26:32Nuxt.js - Just Vue 3 and a bit of magic?
Alexander Lichter
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
OOTI
Paris, France
Senior
React
Next.js
Cypress
JavaScript
TypeScript
+1
TieTalent
Barcelona, Spain
Intermediate
PHP
CSS
React
Laravel
Next.js
+4
Atolls
Berlin, Germany
Junior
NoSQL
Node.js
Next.js
Symfony
Angular
+4
Multiplied
The Hague, Netherlands
Remote
Intermediate
API
CSS
HTML
React
+5
European Recruitment
Badajoz, Spain
API
REST
React
Next.js
GraphQL
+3
Rocken AG
Aarau, Switzerland
Remote
CHF83-111K
REST
React
NestJS
+3