Next.js

Next.js

Next.js by ZEIT - The React Framework Production grade React applications that scale. The world's leading companies use Next.js to build static and dynamic websites and web applications.
Felix Kling

Felix Kling

1639020657

Dynamic Content and Personalization in a Next.js App using Uniform

Dynamic Content & Personalization in Next.js with Uniform

Learn how to boost engagement in your Digital Experience Platform with dynamic content and personalization in a Next.js app using Uniform. We'll walk through integrating Uniform using their Canvas tool and using Intents to show different experiences based on the visitor.

🧐 What's Inside
00:00 - Intro
00:11 - Sponsored by Uniform
00:55 - Tools we'll use including Uniform Optimize & Next.js
01:41 - Creating a new Next.js app from a demo project starter
03:15 - Starting a new Uniform Project
03:55 - Adding a new Uniform Canvas Component and Parameters
06:36 - Creating a new Composition Component and adding Slots
09:30 - Setting up and configuring a Composition
11:35 - Installing and configuring Uniform Canvas SDK in a Next.js app
14:22 - Using .env to store Uniform API Key and Project ID
17:05 - Adding Uniform React components to render Composition data
19:25 - Creating and publishing Uniform Intents and Signals for personalization
23:48 - Personalizing Composition Slots with Components in Uniform Canvas
26:31 - Installing Uniform Optimize to add tracking for personalization
32:45 - Outro

πŸ—’οΈ Read More
https://spacejelly.dev/posts/how-to-personalize-content-jamstack-web-experiences-with-uniform-next-js/ 

#nextjs #webdevelopment #webdev #next 

Dynamic Content and Personalization in a Next.js App using Uniform
Ruth  Nabimanya

Ruth Nabimanya

1638938885

How to Build Our Database Connection Guide using Next.js Step by Step

When we set out to build a comprehensive Connection Guide for Databases, we looked for what web framework to build with. Next.js was the clear choice. Especially for a 100+ page, wiki-style repository with a formulaic structure, Next.js made coding and pushing the site a delight.

  1. Why build a Database Connections Guide?
  2. Next.js implementation

#database #next #nextjs #javascript 

How to Build Our Database Connection Guide using Next.js Step by Step

How to Build Spotify 2.0 with NEXT.JS 12.0

Let's build Spotify 2.0 with NEXT.JS 12.0! (Middleware, Spotify API, Tailwind, NextAuth, Recoil)

πŸ”»Join me as I build an insane Spotify 2.0 clone where you’ll learn:

πŸ‘‰  Fetch Spotify Playlists + Control Music playback with the Spotify API
πŸ‘‰  User authentication with Spotify + NextAuth to persist user's logged in state! (Including how to use access & refresh oAuth JWT tokens)
πŸ‘‰  Style an awesome responsive UI with Tailwind CSS
πŸ‘‰  Learn how to use Next.js 12 Middleware to handle authenticated user access!
πŸ‘‰  Learn how to use Recoil for state management (when switching playlists and songs)!

+ SO MUCH MORE!

πŸ• TIMESTAMPS:
00:00 Introduction
00:46 Build Showcase  
03:11 Hostinger Sponsorship
07:15 Build Explanation
12:25 Setting up Next.js, Tailwind CSS & Spotify
17:01 Initialising the build
19:04 Build Layout
21:33 Building the Sidebar Component (1/3)
42:18 Explaining NextAuth Authentication
43:37 Implementing NextAuth Authentication (1/2)
56:54 Implementing Spotify Web API
1:03:08 Implementing NextAuth Authentication (2/2)
1:25:11 Customising the Sign In Page
1:37:11 Building the Sidebar Component (2/3)
1:40:09 Explaining Middleware [Next.js 12.0]
1:41:47 Implementing Middleware [Next.js 12.0]
1:50:19 Building the Center Component (1/2)
2:06:31 Implementing the useSpotify Custom Hook
2:11:24 Building the Sidebar Component (3/3)
2:19:27 Implementing Recoil 
2:21:30 Implementing Recoil Atoms
2:28:00 Building the Center Component (2/2)
2:44:56 Building the Songs Component
2:49:21 Building the Song Component
3:05:54 Building the Player Component
3:11:02 Implementing the useSongInfo Custom Hook
3:14:39 Building the Left Side of the Player Component
3:25:15 Building the Center of the Player Component
3:34:22 Building the Right Side of the Player Component
3:37:08 Debouncing Explained
3:38:42 Implementing Volume Functionality using Debounce
3:47:08 Final Build Demo
3:51:09 Deploying to Vercel
3:58:31 Outro

πŸ–₯️ CODE
Get the code for my builds here: https://links.papareact.com/github 

#react #nextjs #tailwindcss #next #spotify #oauth #reactjs #recoil #api

How to Build Spotify 2.0 with NEXT.JS 12.0
Chris  Miller

Chris Miller

1638715380

Portfolio & Blog website use Next.js, GraphCMS & Tailwindcss - Part 1

Learn to build a portfolio and blogging website using Next.js for the frontend, GraphCMS, a headless CMS for the backend and styling the website with Tailwind css. We will build out everything from the ground up.

Github Repo: https://github.com/adamrichardson14/portfolioexamplegraphcms

#next #tailwindcss 

Portfolio & Blog website use Next.js, GraphCMS & Tailwindcss - Part 1
Chris  Miller

Chris Miller

1638708000

Find out: Next.js (react), Prisma and Tailwindcss URL Shortener App

In this video we will be creating an application from scratch with Next.js, Prisma and Tailwindcss. The application is a URL shortener and will be able to store URLs and a shortened ID, along with redirecting to the given URL when someone comes to the short URL.

#next  #react #tailwindcss 

Find out: Next.js (react), Prisma and Tailwindcss URL Shortener App
Chris  Miller

Chris Miller

1638700620

Youtube API to fetch data display channel statistics/videos in Next.js

In this video I'm rebuilding the video section of my new website with you. We look at data fetching with getStaticProps, resolving mutliple promises in parallel and styling with Tailwind css, along with setting up a Next.js project from scratch with an ESLint config.

00:00 Introduction
01:00 Create App, ESLint & Prettier config
05:50 Tailwind css install
10:10 Fetching data
21:25 UI components statistics
26:52 Sorting & filtering video data
33:30 Displaying & styling video list items
42:30 Review and performance

Git repository
https://github.com/adamrichardson14/youtubestatistics/tree/completed

#next #youtube  #api 

Youtube API to fetch data display channel statistics/videos in Next.js
Chris  Miller

Chris Miller

1638693180

Overview and Guide for Beginners - Next.js: Getting Started

This video will equip you with all the knowledge required to start using Next.js in your projects. Subscribe to the channel so you don't miss out on upcoming full stack tutorials.

00:00 Introduction
00:55 Getting Started and Intro Slides
10:00 Create Next.js application
12:35 Creating Pages & Routing
15:10 Navigating between Pages
19:00 Global Header Component
21:05 Data Fetching - React way
27:20 Data Fetching - Server Side Rendering
33:55 Static Data Fetching - Get static Props
43:38 Dynamic Routing & Data fetching
1:02:50 Next/Image component
1:14:03 Css Module - Styling next/image dynamically
1:25:05 Environment variables
1:31:15 Next Head - Adding titles and title component
1:35:55 Next API Routes
1:40:28 Pushing code to Github
1:41:48 Deployment to Vercel

#next 

Overview and Guide for Beginners - Next.js: Getting Started
Chris  Miller

Chris Miller

1638671160

Contact form using React-hook-form and /api Route For Submission

In this video we look at a simple contact form with some validation using react-hook-form. We use the Next.js API route to submit the form via email using nodemailer.

https://github.com/adamrichardson14/forms

#next #react 

Contact form using React-hook-form and /api Route For Submission
Chris  Miller

Chris Miller

1638663780

How to Create a blog with Next.js, Tailwindcss and Sanity.io - Part 4

In this video, we go through making a blog step by step with Next.js, Tailwindcss and Sanity.io.

#next #tailwindcss #sanity 

How to Create a blog with Next.js, Tailwindcss and Sanity.io - Part 4
Chris  Miller

Chris Miller

1638656520

How to Create a blog with Next.js, Tailwindcss and Sanity.io - Part 3

In this video, we go through making a blog step by step with Next.js, Tailwindcss and Sanity.io.

#next #tailwindcss #sanity 

How to Create a blog with Next.js, Tailwindcss and Sanity.io - Part 3
Chris  Miller

Chris Miller

1638649200

How to Create a blog with Next.js, Tailwindcss and Sanity.io - Part 2

In this video, we go through making a blog step by step with Next.js, Tailwindcss & Sanity.io.

#next #tailwindcss #sanity 

How to Create a blog with Next.js, Tailwindcss and Sanity.io - Part 2
Chris  Miller

Chris Miller

1638641940

How to Create a blog with Next.js, Tailwindcss and Sanity.io - Part 1

In this video, we go through making a blog step by step with Next.js, Tailwindcss and Sanity.io.

#next #tailwindcss #sanity 

How to Create a blog with Next.js, Tailwindcss and Sanity.io - Part 1

Introduction to Next.JS

In this tutorial for beginners, you'll learn how Next.js fits in with the Jamstack, how to use some of their built-in features, and how to deploy it. We'll also talk about Next.js' latest APIs and features and live-code through how to use them!
 

#nextjs #react #next

Introduction to Next.JS
Laura  Fox

Laura Fox

1638499500

How to Host and Deploy React and Next Js Website (10 Minutes)

How to Host and Deploy React and Next Js app to Upload Website to Internet in 10 Minutes

What Covered in this video -
1. Two Methods for deploying website through Github repo
2. Deploy react website using Vercel
3. Deploy react website using Netlify
4. Discussion about custom domain

#api #react #next #nextjs 

How to Host and Deploy React and Next Js Website (10 Minutes)
Laura  Fox

Laura Fox

1638498540

How to Style Our Markdown using Css for Blog Page

In this video, we are going to build a blog page. 
1. We will style our markdown using Css
2. Markdown Render Images Strapi


Source Code Next js - https://github.com/anshuopinion/strapi-next-js-frontend

#strapi  #next  #nextjs  #javascript  #node  #typescript 

How to Style Our Markdown using Css for Blog Page