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.
Matching moments
01:34 MIN
Getting started with Next.js for React applications
GraphQL + Apollo + Next.js: A Lovely Trio
24:31 MIN
Integrating with the web ecosystem and tooling
Lynx: Native for More
11:55 MIN
Implementing dynamic routes and using TypeScript
GraphQL + Apollo + Next.js: A Lovely Trio
34:02 MIN
A summary of key web development trends in 2021
Web development best practices in 2021
26:45 MIN
Live coding: Initializing an app and creating pages
Modern Web Development with Nuxt3
09:51 MIN
Live coding a product card with utility classes
Level up your Angular CSS with Tailwind CSS
07:41 MIN
How Tailwind solves common CSS challenges
Level up your Angular CSS with Tailwind CSS
02:38 MIN
Understanding the fundamentals of Tailwind CSS
Level up your Angular CSS with Tailwind CSS
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:44Next.js Unleashed: Optimizing Web Vitals for superior User Experience
Eileen Fürstenau
26:32Nuxt.js - Just Vue 3 and a bit of magic?
Alexander Lichter
26:00To New Frontiers: The Future of Frontend Development
Rainer Hahnekamp
From learning to earning
Jobs that call for the skills explored in this talk.
Fullstack Developers (Headless CMS) - 100% remote, ASAP, 12+ months
wynwood tech LLC
Remote
React
Node.js
Next.js
JavaScript
+2
Lead Full-Stack Engineer
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
React
Vue.js
Node.js
MongoDB
+1