Next.js 10 came out with Internationalized Routes... we cover the basics of it in this video, how to load translated remote data, and how to translate text using react-intl.

---------- Links

Next.js Docs - https://nextjs.org/docs/advanced-features/i18n-routing
Source Code - https://github.com/leighhalliday/nextjs-i18n-routing-demo
Starting Code - https://github.com/leighhalliday/nextjs-i18n-routing-demo/tree/5f989e572abba611e3ac5abc9348cde9d04a8cdc

---------- Connect

Join this channel - https://www.youtube.com/channel/UCWPY8W-FAZ2HdDiJp2RC_sQ/join
Join me on Discord - https://discord.gg/wcSNwfu

---------- Timeline

00:00 - Introduction
00:45 - Configuring Locales
03:00 - Accessing Locale
06:00 - Remote Translated Data
09:25 - React Intl

Introduction to Next.js 10's Internationalized (i18n) Routing

Learn Next.js by building and deploying a simple news app using Next.js. Next.js allows us to easily implement Server Side Rendering in our applications so that we can have better SEO and crawl-ability than standard React single page applications. Nex.js also offers other benefits that I go over in this video.

#Nextjs #Reactjs #WebDev2021

🎵 Music by Moon Wash.
https://songfuze.com/artist/moonwash

0:00 Intro
0:39 Demo
3:23 News API
4:04 Project Setup
5:30 Nextjs Ecosystem
12:20 Writing The Code
55:02 Deploy To Vercel
59:50 SSR Benefits
1:02:12 Outro

🔗What Is Server Side Rendering: https://youtu.be/5jLix0CILCM
🔗What Is Isomorphic JavaScript: https://youtu.be/tVaFAAAzHsw
🔗Beginner React Tutorial: https://youtu.be/ZcD5rJKm3Lk
🔗Advanced React Tutorial: https://youtu.be/ODoxVFQKmBc
🔗React Hooks: https://youtu.be/-Yir1R6gC9s

Finished Code: https://github.com/portexe/next-news

---

👀 Follow Me:
Twitter ➔ https://twitter.com/portexe
Instagram ➔ https://www.instagram.com/port.exe/
GitHub ➔ https://github.com/portexe
Facebook ➔ https://www.facebook.com/portexe
Website ➔ https://www.portexe.com/

Beginner Next.js Tutorial - Coding A News App With Next.js

Learn the basics of Next.js in 100 Seconds! Then build your first server-rendered react app with a full Next.js beginner's tutorial. https://fireship.io/courses/react-next-firebase

#react #webdev #100SecondsOfCode

Next.js Docs https://nextjs.org/
Source Code https://github.com/fireship-io/nextjs-basics

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font

Next.js in 100 Seconds

Next.js can do a lot for you — which means there's features you probably haven't used! This video covers ten tips you might not know about Next.js.

0:00 – Introduction
0:09 – Redirects
0:44 – Rewrites
1:24 – Preview Mode
2:19 – Build Process
2:57 – Preact
3:48 – Absolute Imports and Module Path Aliases
4:21 – CRUD API Routes
5:06 — Setting Response HTTP Caching Headers
5:31 — Shared Component Attributes
6:30 — Mobile Apps!?
7:32 – Conclusion

Links
–––––
1: https://nextjs.org/docs/api-reference/next.config.js/redirects
2: https://nextjs.org/docs/api-reference/next.config.js/rewrites
3: https://next-preview.vercel.app/
4: https://github.com/leerob/leerob.io/blob/master/next.config.js#L8-L11
5: https://github.com/leerob/leerob.io/commit/74a3ebb14b81f785ea96f9c73fbe4f6c2463679c
6: https://nextjs.org/docs/advanced-features/module-path-aliases
7: https://leerob.io/snippets/crud-api-route
8: https://github.com/leerob/leerob.io/blob/master/pages/api/subscribers.js#L13-L16
9: https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
10: https://github.com/mlynch/nextjs-tailwind-capacitor

–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/

10 Next.js Tips You Might Not Know!

In this video, you'll learn how to use and expose environment variables in Next.js. I cover how to use environment variables for both server side operations as well as exposing specific environment variables to the browser.

Learn How to Use Next.js Environment Variables and NEXT_PUBLIC

Today we are going to look at how to connect a GraphQl API to Next.js with Apollo. 
The example is made with an API coming from Hasura.

The link to the repo: https://github.com/samfromaway/nextjs-apollo

More about it here in the official Next.js documentation: https://github.com/vercel/next.js/tree/canary/examples/with-apollo
Another great example where a HOC is used instead of directly calling it: https://github.com/leerob/daydrink/blob/master/graphql/apollo.js
Blog article by Apollo: https://www.apollographql.com/blog/building-a-next-js-app-with-apollo-client-slash-graphql/

CONTACT:
📱 Facebook  -  https://www.facebook.com/devworldinfo
🌎 Website  -  https://www.dev-world.info
📧 Email  -  contact@dev-world.info

ABOUT THIS CHANNEL:
Dev World is a mix of tutorials and educational videos around Coding, Online Marketing, and Design.

#Nextjs #GraphQl #Apollo

Next.js (v10) with GraphQl and Apollo (v3)

React Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.

0:00 – Introduction
0:45 – How is this different from PHP / Rails?
1:11 – Overview
1:31 – Hybrid Applications
3:50 – How is this different from SSR?
5:14 – React Suspense and Concurrent Mode
6:20 – Hosting React Server Components
6:59 – Demo
8:53 – Conclusion

Links
–––––
Announcement: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
RFC: https://github.com/reactjs/rfcs/pull/188
Demo: https://next-server-components.vercel.app/
Source Code: https://github.com/vercel/next-server-components

–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/

React Server Components (with Next.js Demo)

In this video I show you have to test 2 different functions from our "API". 

00:00 - Intro 
00:25 - Blog application
01:31 - Installing Jest
02:04 - Setting up Jest.
03:10 - Our First Test 
06:14 - Our Second Test
08:31 - Intentionally Breaking a test.
09:34 - Outro

Follow me on:
📃 Website/Blog: https://jamesperkins.io
👉 Twitter: https://twitter.com/james_r_perkins
👉 Linkedin: https://www.linkedin.com/in/james-perkins-268992a4
👉 Github: https://github.com/perkinsjr
👉  Discord : https://discord.gg/dqYP9Mc
--- 
Need 1:1 mentoring? 
Want to Donate?
Want to do business?
https://snugg.me/snuggery/?id=AGZ8lAig7uf1zXobyhw0jfuXA6Q2 
--

Testing our blog with Jest in NextJS

Build an E-Commerce Platform in 25 Days with Next.js, Netlify and Stripe

Welcome to the introductory video to the Build an E-Commerce Platform in 25 Days with Next.js, Netlify and Stripe course. We will be releasing a new bite sized chunk each day until Christmas!

In this video we step through what we will be building and install the dependencies.


Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 1 - Introduction to Build an E-Commerce Platform in 25 Days with Next.js, Netlify and Stripe

Day 2! How exciting!

In this video we create a new React application and learn how components help us compartmentalize our UIs into reusable chunks.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 2 - React Basics: What is a Component?

In this video we start building "smart" components, that can remember things for us. By encapsulating this state within the component, we can build reusable pieces of UI to use across projects.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 3 - React Basics: What is State?

In this video we look at how we pass data from a parent component to a child component with Props.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 4 - React Basics: What are Props?

In this video we learn about side effects, and how we can trigger them based on state changes with useEffect.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 5 - React Basics: What are side effects and useEffect?

In this video we learn how to create pages from React components in Next.js. This begins our second section of the course, where we learn about Next.js

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 6 - Next.js: How to Create a Page

In this video we learn how to create a consistent navigation section that renders on every page. We then look at how Next.js helps us implement client side routing with the Link component.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 7 - Next.js: Routing and Link component

In this video we learn how to create dynamic routes. These are similar to our page routes, but give us the ability to pass a dynamic value from our route into our component.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 8 - Next.js: Dynamic Routes

In this video we look at how easy it is to host our Next.js application on Netlify.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 9 - Next.js: Host on Netlify

In this video we check out Netlify's preview deploys, that automatically detect new GitHub Pull Requests, and deploy a preview version that we can send to people for approval or input throughout development.


Twitter: https://twitter.com/_dijonmusters



Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 10 - Next.js: Preview deploys with Netlify

In this video we learn how to make a HTTP request to an external API and fetch some data. We use the axios library to fetch pokemon from the Poke API. We also touch on promises and caching. It's a big one!


Poke API: https://pokeapi.co/


Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 11 - Next.js: Fetching data from an API

In this video we look at moving our client side API requests to the `getStaticProps` function - provided by Next.js - to generate static pages that already include our Pokemon data.


This means we can make all those requests once when we build a new version of our app, and bake those results into a static HTML page, which is much faster for our users!



Poke API: https://pokeapi.co/

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 12 - Next.js: Generate static pages

In this video we actually start building our e-commerce application. We start by building up markdown files containing our product data, and iterate over these to show our landing page.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 13 - Building our app: Generating a product list with getStaticProps

In this video we look at generating a static page for each one of our products. We will be using another Next.js function called getStaticPaths to accomplish this.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 14 - Building our app: Generating product pages with getStaticPaths

In this video we look at configuring the Styled Components CSS in JS library. This give us much more flexibility with our styling, and helps us keep our styling colocated with the rest of the component.


Additionally, we look at loading a font from Google Fonts, and setting up some basic styling for our app.


.babelrc file: https://github.com/dijonmusters/e-commerce-in-25-days/blob/master/15-styled-components/next-app/.babelrc



_document.js file: https://github.com/dijonmusters/e-commerce-in-25-days/blob/master/15-styled-components/next-app/pages/_document.js

Twitter: https://twitter.com/_dijonmusters


Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 15 - Building our app: Configuring Styled Components and Google Fonts

In this video we use the CSS-in-JS library Styled Components to style our landing page, and product detail page.


This is a long one! Lots to cover in CSS land! Lots of tips and tricks for making things look schmick!

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 16 - Building our app: Styling with Styled Components

In this video we look at implementing a shopping cart, so our users can queue up products to purchase. We use localStorage to remember state across different pages, and even when we close the browser and come back later!


Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 17 - Building our app: Create a shopping cart using Local Storage

In this video we make our shopping cart globally available by using React Context.


Context gives us a way to create some global state that components at any level of our app can subscribe to, without needing to drill those props down every layer!

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 18 - Building our app: Make a global shopping cart with React Context

This is another style style style video! In this one we look at styling the shopping cart. We also learn about passing props to styled components.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 19 - Building our app: Styling the cart with Styled Components

In this video we build out a checkout page, to display to our users before they proceed to Stripe's checkout flow. We also fix a couple of bugs in our cart, and create Payment Successful and Payment Cancelled pages.


We are getting close to the end here!


Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 20 - Building our app: Create a checkout page

In this video we look at creating a Netlify Function. This allows us to easily encapsulate some server-side logic into a function that Netlify magics into a hosted serverless function for us!


❤️ u Netlify! 

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 21 - Building our app: Create a Netlify Function

In this video we look at setting up Stripe and enabling our Live API keys.

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 22 - Building our app: Setup Stripe

In this video we look at handling secrets in Netlify. We create a .env file for injecting our test API keys in our local environment, and configure Netlify Environment Variables for production! 🔒

Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 23 - Building our app: Secrets in Netlify

In this video we finally wire everything up together and use our Netlify function to charge a card with Stripe!


We also fix a few bugs 😅


Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 24 - Building our app: Charge a card with Stripe Checkout

We made it! Christmas (or the holiday season) is here!


In this video we wrap up everything that we have done, and discuss some additional bit and pieces you can do for extra credit!


Subscribe to my stuff on YouTube, follow me on Twitter, and I will be putting out an even more in-depth e-commerce course in 2021!



Twitter: https://twitter.com/_dijonmusters

Repo: https://github.com/dijonmusters/e-commerce-in-25-days

🎄Day 25 - Building our app: Wrapping up! 🎁

Use the Twitter API, Tailwind CSS, and Next.js to embed tweets directly on your website without using any iframes or external scripts.

0:00 – Introduction
0:25 – Embedding Tweets (The Old Way)
1:28 – Tailwind Play (Building the Widget)
2:15 – Twitter API Overview
3:20 – Fetching Tweets with the Twitter API
4:25 – Formatting the API Response
6:48 – Creating a Next.js Page
8:01 – Tweet Component
10:34 – Conclusion

Links
–––––
Demo: https://leerob.io/tweets
Tailwind Play: https://play.tailwindcss.com/TsZaNJbeLy
PR: https://github.com/leerob/leerob.io/pull/257
API Docs: https://developer.twitter.com/en/docs/twitter-api/tweets/lookup/quick-start
API Reference: https://developer.twitter.com/en/docs/twitter-api/tweets/lookup/api-reference/get-tweets
Related Project: https://static-tweet.vercel.app/

–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/

Introduction to Next.js 10's Internationalized (i18n) Routing

Beginner Next.js Tutorial - Coding A News App With Next.js

Next.js in 100 Seconds

10 Next.js Tips You Might Not Know!

Learn How to Use Next.js Environment Variables and NEXT_PUBLIC

Next.js (v10) with GraphQl and Apollo (v3)

React Server Components (with Next.js Demo)

Testing our blog with Jest in NextJS

Build an E-Commerce Platform in 25 Days with Next.js, Netlify and Stripe December 30th, 2020

🎄Day 1 - Introduction to Build an E-Commerce ...

🎄Day 2 - React Basics: What is a Component?

🎄Day 3 - React Basics: What is State?

🎄Day 4 - React Basics: What are Props?

🎄Day 5 - React Basics: What are side effects ...

🎄Day 6 - Next.js: How to Create a Page

🎄Day 7 - Next.js: Routing and Link component

🎄Day 8 - Next.js: Dynamic Routes

🎄Day 9 - Next.js: Host on Netlify

🎄Day 10 - Next.js: Preview deploys with Netlify

🎄Day 11 - Next.js: Fetching data from an API

🎄Day 12 - Next.js: Generate static pages

🎄Day 13 - Building our app: Generating a ...

🎄Day 14 - Building our app: Generating product ...

🎄Day 15 - Building our app: Configuring Styled ...

🎄Day 16 - Building our app: Styling with Styled ...

🎄Day 17 - Building our app: Create a shopping ...

🎄Day 18 - Building our app: Make a global ...

🎄Day 19 - Building our app: Styling the cart ...

🎄Day 20 - Building our app: Create a checkout ...

🎄Day 21 - Building our app: Create a Netlify ...

🎄Day 22 - Building our app: Setup Stripe

🎄Day 23 - Building our app: Secrets in Netlify

🎄Day 24 - Building our app: Charge a card with ...

🎄Day 25 - Building our app: Wrapping up! 🎁

Rebuilding the Twitter Embed Widget! (Next.js + Tailwind)