Marius Obert

From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners

What if your frontend components could securely run server-side code directly? See how Next.js 13 Server Actions make it possible.

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.

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related Videos

GraphQL + Apollo + Next.js: A Lovely Trio40:45

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

Microfrontends at Scale43:20

Microfrontends at Scale

Josh Goldberg

Build Your Own Subscription-based Course Platform1:24:47

Build Your Own Subscription-based Course Platform

Dávid Lévai

Teini - an extremely small webshop leveraging awesome and free tech40:45

Teini - an extremely small webshop leveraging awesome and free tech

Christian K.

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Level up your Angular CSS with Tailwind CSS31:41

Level up your Angular CSS with Tailwind CSS

Patricio Vargas

Level up your Angular CSS with Tailwind CSS47:46

Level up your Angular CSS with Tailwind CSS

Patricio Vargas

Next, Nest, Nuxt… Nust?26:30

Next, Nest, Nuxt… Nust?

Marius Obert

From learning to earning

Jobs that call for the skills explored in this talk.