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.

job ad

Saby Company

Saby Company
Delebio, Italy

Remote
Intermediate
Node.js

Matching moments

An overview of Next.js and its optimization capabilities
03:55 MIN

An overview of Next.js and its optimization capabilities

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Solving UI challenges with a modern tech stack
01:24 MIN

Solving UI challenges with a modern tech stack

Building Interactive Async UI with React 19 and Ariakit

Introducing the modern stack for a course platform
02:13 MIN

Introducing the modern stack for a course platform

Build Your Own Subscription-based Course Platform

Integrating with the web ecosystem and tooling
03:47 MIN

Integrating with the web ecosystem and tooling

Lynx: Native for More

Getting started with Next.js for React applications
04:31 MIN

Getting started with Next.js for React applications

GraphQL + Apollo + Next.js: A Lovely Trio

A deployed version of the app using Next.js
02:01 MIN

A deployed version of the app using Next.js

Rust and Docker: Let's build an AI-powered app!

Implementing dynamic routes and using TypeScript
04:32 MIN

Implementing dynamic routes and using TypeScript

GraphQL + Apollo + Next.js: A Lovely Trio

Demonstrating a multi-version and multi-framework app
03:58 MIN

Demonstrating a multi-version and multi-framework app

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Featured Partners

Related Videos

See all videos
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

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

Modern Web Development with Nuxt341:43

Modern Web Development with Nuxt3

Alexander Lichter

Build and Deploy a Fullstack App with Open Source Tooling25:53

Build and Deploy a Fullstack App with Open Source Tooling

Noam Honig

Next.js Unleashed: Optimizing Web Vitals for superior User Experience26:44

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Eileen Fürstenau

Related Articles

View all articles
DC
Daniel Cranney
Next.js App Router: Explained
IntroductionVercel’s Next.js has come a long way since its initial release in 2016. What would become the most popular React framework (according to their own website, at least), started as a simple solution for handling routing, SEO optimisation and...
Next.js App Router: Explained
LM
Luis Minvielle
The Best Upcoming IT Webinars
Now that you already know what IT webinars are and how they can help you level up your professional appeal, you might want actually to get into one. Live tech webinars are one of the best ways to stay on top of the latest trends and tools because eit...
The Best Upcoming IT Webinars
LM
Luis Minvielle
10 Developer Websites in 2023
As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
10 Developer Websites in 2023
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!

From learning to earning

Jobs that call for the skills explored in this talk.