Next.js 14 + Tailwind CSS + i18n + Headless CMS - Build and Deploy a Modern Next JS 14 App

preview_player
Показать описание


My courses:

💻 MY GEAR
Connect with me:

Timestamps
03:20 Creating structure and components (hard coded values, phase 1)
18:50 Spaces, blocks & stories inside Storyblok
21:40 Adding blocks and stories for our application
26:36 Accessing draft & published data from Storyblok
32:24 Modify Navigation component to use Storyblok data
37:13 Hero section
44:05 Services section
48:44 Testimonials section
54:18 Contact section
57:03 FAQ section
1:00:58 Footer section
1:05:08 Phase 3: Adding & configuring translations
1:14:25 Translating fields in Storyblok
1:20:11 Recap what we did

#nextjs #nextjs13 #nextjstutorial
  1. Tuomo Kankaanpää
  2. nextjs
  3. javascript
  4. next js
  5. next.js
  6. next js 13
Рекомендации по теме
Build a Next.js 0:47:03

Build a Next.js 14 Portfolio website with Tailwind CSS and Typescript

Build a Complete 12:00:00

Build a Complete E-Commerce Shop with Next.js 14, Tailwind, React | Full Course 2024

Step-by-step Guide: Setting 0:05:27

Step-by-step Guide: Setting Up Tailwind Css In Next Js 14 | Perfect For Next Js 14 Newbies!

Build and Deploy 3:13:56

Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

Build and Deploy 3:26:10

Build and Deploy a Modern Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS

How to Use 0:03:22

How to Use Tailwind CSS in Next.js

Create a modern 2:13:39

Create a modern and fully responsive UI/UX website with Next.js 14 and Tailwind

Build a Dark 5:29:23

Build a Dark Modern Animated Website with Next.js 14, GSAP, Prismic, Tailwind, and TypeScript

Auth.js V5 (2024) 9:38:08

Auth.js V5 (2024) with Next.js, Tailwind, DrizzleORM, NeonDB | Full Tutorial

Build and Deploy 5:24:12

Build and Deploy a Patient Management System with Next.js | Twilio, TypeScript, TailwindCSS

Setting up Tailwind 0:04:52

Setting up Tailwind CSS in a Next.js Project

Next js 14 1:00:26

Next js 14 Service Website Using Typescript, Shadcn UI, Tailwind CSS | Next js Beginner Project

Build and Deploy 1:57:06

Build and Deploy a Fully Responsive Modern UI/UX Website | React.js, Next.js 13, Tailwind CSS

How To Build 3:55:43

How To Build A Portfolio Website: React.js, Next.js 14, Tailwind CSS, Shadcn UI

Beginner Web Dev 2:17:50

Beginner Web Dev Project Tutorial – Weather App with Next.js, Tailwind CSS, and TypeScript

Next.js Dark Mode 0:09:43

Next.js Dark Mode with No Flicker + Tailwind CSS

Next.js 14 Complete 4:55:49

Next.js 14 Complete Course 2024 | Next.js 14 Full Stack App Tutorial for Beginners

Tailwind Vs MaterialUI 0:01:31

Tailwind Vs MaterialUI | Tailwind CSS Course With Next JS React Typescript

Build and Deploy 4:41:34

Build and Deploy a Full Stack Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS

Tru Narla: Building 0:13:35

Tru Narla: Building a design system in Next.js with Tailwind

Tailwind CSS V4 0:10:43

Tailwind CSS V4 For NextJS, Astro and Vite TODAY

Build and Deploy 0:00:33

Build and Deploy a Full Stack Next 14 MERN Events App with Stripe, Typescript, Tailwind

Using Fonts in 0:06:05

Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)

NextJS Tutorial - 0:44:38

NextJS Tutorial - All 12 Concepts You Need to Know

Комментарии
Автор

You are probably the only one who is making detailed technical videos on Nextjs features

bilalch
Автор

Thank you, I was just in need of that specific tutorial, you nailed it!

WelliDon
Автор

awesome exactly what i was looking for! thanks a lot!

pascalmorgan
Автор

Thank you for your tutorial because easy to follow.

izsalqurlinas
Автор

Hi Tuomo, thanks for the video! Have you tried using the Storyblok react SDK? And would you know if it's also compatible with Next JS 14?

alowais
Автор

This tutorial is awesome! I was looking for resources about integrating headless CMS with Next.js and found your video packed with valuable details. Thank you @TuomoKankaanpaa for creating such great content. You earned yourself a new subscriber.

christopheradolphe
Автор

great Job Man. you are real teacher. I hope you will make a full website of 3, 4 pages in next js14 using Tailwind CSS + i18n

mzeeshanfayyaz
Автор

Is it better option than using contentlayer or sanity?

spacecoder
Автор

how would I edit the middleware so that when the user travels between pages they keep the same language ? at the moment if you go to another page the default is english, requiring the user to change between languages on each page load

kuzpvwc
Автор

What about localized slugs? And what if I dont want the /en or /fi slug to be shown?

valzu
Автор

Replace "px-52" with "px-10 lg:px-52" on both Testimonials and Faq. Your mobile view will be much better.

tharakakarunarathne
Автор

And what about deploying of this project?

xhostno