Next.js 9.3 introduces new static-site generation improvements, native support for SCSS, reduced bundle sizes, static 404 pages, and more!

Next.js 9.3

This playlist contains all the videos from the Next.js Tutorial. 

When completed you'll have all the needed information to create and maintain Next.js applications.

Feel free to ping me, if you need something not present here :)

I hope you enjoy,
Bruno

Next.js Tutorial

This video starts the Tutorial series on Next.js.

In this video, we will learn how to create static and dynamic routes in Next.js

Next week we will continue the series with "Async Operations in Next.js".

---
New video explaining the differences from Next 9.2 to Next 10 - https://youtu.be/BBT5BLhZ_5o
---
Github Repository: https://github.com/bmvantunes/youtube-2020-feb-nextjs-part1
----
Google Performance Metrics Blog: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
----

Follow me on:
Twitter: https://twitter.com/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 1 | Router for Beginners

In this video we are going to see all the changes that happened in the Next.js Router between all the 9.x versions up to version 10.

We will see that the router is now case sensitive and we no longer need to use the "as" property in the Link component.

At the end of the video I'll also show how to ignore some files in the pages folder, to avoid primarily creating new pages for the unit test files.

In the past I showed you that you could create a container folder to match your pages folder structure and only export your components in the pages folder. That way you would not open new routes for every single unit test file named "file.spec.js". For that we will be using next.config.js with "pageExtensions" property.

----
GitHub Repository: https://github.com/bmvantunes/youtube-2020-nov-nextjs-router
----
next.config.js default values: https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config.ts#L23
----
Next.js Link API Reference: https://nextjs.org/docs/api-reference/next/link
----

Timeline:
00:00 Introduction
01:21 Case Sensitive Routing
03:20 Link without "as" prop for dynamic routes
05:28 Having unit-tests (file.spec.js) in page folder without creating new routes

----
Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
GitHub: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Router Update: Changes from Next 9.2 to Next 10

In this video, we will learn how to fetch data, on client-side rendering and server-side rendering using getInitialProps.

In part 9 we will have a look into getServerSideProps and compare it with getInitialProps - https://youtu.be/61TngxLrP_0

In the next video, we will continue the series converting the current code to "Typescript".

---
Github Repository: https://github.com/bmvantunes/youtube-2020-feb-nextjs-part2
----
SWR Video: https://youtu.be/a7JigiLw_OY
----

Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 2 | Data Fetching with getInitialProps

In this video, I'll show the strategy you can use to migrate any javascript application to typescript.

I'll also show a practical example using a Next.js application.

The strategy consists of creating a dependency graph/tree. Then start the migration by the leaf components going up to the root components.

----
Github Repository: https://github.com/bmvantunes/youtube-2020-march-nextjs-part3
----
Slides: https://docs.google.com/presentation/d/1VB7XQNrMyKa0n8y2JvCzKEgSKt8Tdr0nKJWbPVyH8Ow/edit?usp=sharing
----

Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 3 | TypeScript Migration

In this video, I'll show how to use Next.js API Routes with a SQL Database.

I'll present a sample screen in order to help you visualize the needed endpoints. Then we will code / create 6 endpoints:
/api/vehicles (GET)
/api/vehicle/:id (GET)
/api/people (GET)
/api/person/:id (GET)
/api/person/:id (PUT)
/api/person/:id/vehicles (GET)

All of those endpoints will be connected with a SQL Database SQLite.
In the video, I explain why we are using SQLite instead of something like MongoDB or SQL Server.

I hope you enjoy the video :)

----
Repository: https://github.com/bmvantunes/youtube-2020-march-nextjs-part4
----
Slides: https://docs.google.com/presentation/d/1izjQBjUYiF5PCSdDuHcsEAMFYkc--_BTLW-iCby70oI/edit?usp=sharing
----
HTTP Verbs/Methods description: https://restfulapi.net/http-methods/
----

Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 4 | API Routes using SQL Database

This video shows how to configure material-ui in a Next.js project.
In order to achieve that integration, we will use _app and _document.

----
Repository: https://github.com/bmvantunes/youtube-2020-march-nextjs-part5
----
Next.js Examples: https://github.com/zeit/next.js/tree/canary/examples
----
Custom document documentation: https://nextjs.org/docs/advanced-features/custom-document
----
Custom app documentation: https://nextjs.org/docs/advanced-features/custom-app
----

Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 5 | Material-ui Integration + _app and _document

This video shows the Theory and Code needed to build an Authentication system. 

We use bcrypt and JWT tokens. We also go through the different strategies to store authentication tokens between different sessions, showing the possible issues with the different strategies.

If you want to jump directly into code go to 20:45

----
Repository: https://github.com/bmvantunes/youtube-2020-march-nextjs-part6
----
Next.js Examples: https://github.com/zeit/next.js/tree/canary/examples
----
Slides available at: https://docs.google.com/presentation/d/15eM4oFshHCwvPDY0BRQGnn8JnVirv9TqKVnaox_8bEk/edit?usp=sharing
----
All references about I used for this video:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Secure_and_HttpOnly_cookies

https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html

https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#SameSite_cookies

https://en.wikipedia.org/wiki/Same-origin_policy

https://owasp.org/www-community/attacks/xss/

https://www.scottbrady91.com/OAuth/OAuth-is-Not-Authentication

https://letsencrypt.org/

https://tools.ietf.org/html/rfc7519

https://codahale.com/how-to-safely-store-a-password/
----

Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 6 | Authentication for API Routes using JWT and bcrypt

This video shows how to consume Authenticated APIs (both Server-side rendering and client-side rendering). We will check the page authentication status based on the API responses.

In this simple example, If the API response status is 401, it means the user is not logged in, so we redirect them to the /login page.

In order to call the API from server-side rendering, we are "forwarding" all the cookies we receive from the client to the fetch (API) call.

----
Repository: https://github.com/bmvantunes/youtube-2020-march-nextjs-part7
----
Next.js Examples: https://github.com/zeit/next.js/tree/canary/examples
----
MDN Set-Cookie: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie
----
React Forms with Formik - Video: https://youtu.be/kYyaJyTLjpk
----

Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 7 | Consume Authenticated APIs with cookies

In this video, we will build an e-commerce website and learn how to use getStaticProps and getStaticPaths in Next.js to statically generate our website.

----
Repository: https://github.com/bmvantunes/youtube-2020-april-nextjs-part8
----
Next.js documentation: https://nextjs.org/docs/basic-features/data-fetching
Next.js Blog: https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support
----
Timeline:
00:00 Introduction to SSG
03:35 Setup SQLite
06:15 Using getStaticProps to create the Landing page
13:55 Using getStaticProps and getStaticPaths for the Details page
29:21 Styling with Material-UI
43:34 Adding pagination to the Landing page using getStaticProps and getStaticPaths
56:39 A challenge for you and conclusion
----

The next description is a "Copy-paste" from Next.js Blog Post + Documentation:

You should use getStaticProps if:
1. The data required to render the page is available at build time ahead of a user’s request.
2. The data comes from headless CMS.
3. The data can be publicly cached (not user-specific).
4. The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance.

Because getStaticProps runs at build time, it does not receive data that’s only available during request time, such as query parameters or HTTP headers as it generates static HTML.

Write server-side code directly
Note that getStaticProps runs only on the server-side. It will never be run on the client-side. It won’t even be included in the JS bundle for the browser. That means you can write code such as direct database queries without them being sent to browsers. You should not fetch an API route from getStaticProps — instead, you can write the server-side code directly in getStaticProps.

Statically Generates both HTML and JSON
When a page with getStaticProps is pre-rendered at build time, in addition to the page HTML file, Next.js generates a JSON file holding the result of running getStaticProps.

This JSON file will be used in client-side routing through next/link (documentation) or next/router (documentation). When you navigate to a page that’s pre-rendered using getStaticProps, Next.js fetches this JSON file (pre-computed at build time) and uses it as the props for the page component. This means that client-side page transitions will not call getStaticProps as only the exported JSON is used.

----
Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 8 | Static Site Generation (SSG) | getStaticProps and getStaticPaths

In this video, we will understand getServerSideProps using code and diagrams! We will look into the differences/similarities between getServerSideProps and getInitialProps. 

At the end of the video, we will also add NProgress to make our UX a bit better when navigating from page to page.

From Next.js documentation:
When should I use getServerSideProps?
You should use getServerSideProps only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than getStaticProps because the server must compute the result on every request, and the result cannot be cached by a CDN without extra configuration.

If you don’t need to pre-render the data, then you should consider fetching data on the client-side using SWR.

----
Timeline:
00:00 Presentation Starts
01:33 Diagram getServerSideProps and getInitialProps - server side
02:35 Diagram getInitialProps - client side
03:23 Diagram getServerSideProps - client side without "optimization"
04:26 Diagram getServerSideProps - client side with "optimization"
05:41 Diagram getServerSideProps - server side with "optimization"
06:16 Tweet from Guillermo Rauch (CEO at zeit)
07:28 Diagram getServerSideProps vs getInitialProps - client side
08:24 Diagram getServerSideProps vs getInitialProps - server side
09:14 A question to you all :)
09:32 Jumping into code!!
10:44 Create a simple component to print json
12:03 Create getServerSideProps in that component with database query
14:07 Create People component to iterate over names
15:00 Create getServerSideProps in People component
17:33 Create navigation between the 2 components
18:33 See the return from getServerSideProps (client side) in the browser
19:54 Introducing Latency to our getServerSideProps to see the implications
21:33 Show how GitHub solves that same issue of latency between navigation
21:53 Introducing NProgress to achieve the same GitHub is achieving
23:05 Custom _app.tsx
24:12 Listen to Next.js router events using Router.events.on('event name', handler)
26:04 Connect NProgress and Next.js Router Events
28:11 Remove the spinner from NProgress
28:45 Play with NProgress options
30:32 Conclusion and thank you!! :)

----
SWR Video: https://youtu.be/a7JigiLw_OY
----
Presentation URL: https://docs.google.com/presentation/d/1JfLfLHuyWsqmXZDVSv5_nFFb5AOfV4NM_Ur9JstcTas/edit?usp=sharing
----
Github Repository: https://github.com/bmvantunes/youtube-2020-april-nextjs-part9
----
getInitialProps Video: https://youtu.be/Os3JZc2CtwY
----

Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 9 | Data Fetching with getServerSideProps

In this video, we will set environment variables, serverRuntimeConfig and publicRuntimeConfig.

We also have a look into cross-env and dotenv packages to help us out with environment variables

From Next.js documentation:
Generally, you'll want to use build-time environment variables to provide your configuration. The reason for this is that runtime configuration (serverRuntimeConfig and publicRuntimeConfig) adds rendering/initialization overhead and is incompatible with Automatic Static Optimization.

----
Timeline:
00:00 Presentation Starts
01:33 Open VsCode and env variable setup recommendation using cross-env
03:50 build-time environment variables
05:15 use next.config.js
07:55 create a new component with getServerSideProps to use runtime configuration
13:40 warning for some possible security problems when using serverRuntimeConfig
15:20 simple example using dotenv
18:30 Conclusion

----
Github Repository: https://github.com/bmvantunes/youtube-2020-april-nextjs-part10
----

Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Next.js Tutorial - Part 10 | Environment Variables and Runtime Configuration

Next.js 9.2 introduces native support for CSS, aggressive code-splitting, catch-all dynamic routes, and more!

Next.js 9.2

We're excited to announce the new Next.js documentation, with new content, search, API reference and more.

New Next.js Documentation

Next.js 9.1.7 improves upon a solid foundation, improving the enterprise-ready 9.1 release-channel. Upgrade for smaller client-side JavaScript bundles, redesigned CLI output, faster FCP/TTI, and more!

Next.js 9.1.7

A free video course for building static and server-side rendered applications with Next.js and React.

Why Next? Companies all over the world are using Next.js to build performant, scalable applications. This course will teach you the skills necessary to build best-in-class React applications.

Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this introduction, we'll talk about...

0:00 – Introduction
2:19 – Why Next.js?
3:55 – Case Study
5:06 – Fundamentals of Next
8:30 – Zero-Config approach
10:55 – Server-side rendering
13:54 – Code splitting
19:45 – Next vs. Create React App vs. Gatsby

Learn more at https://masteringnextjs.com. Cheers! 🎉

#nextjs #react #gatsby

Introduction to Next.js – Next vs. Gatsby vs. CRA

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

1:02 – Classes vs Functional Components
3:18 – Arrow Functions
4:29 – Props
7:25 – ES6 Destructure
8:41 – State
9:30 – Fragment
12:48 – ES6 Spread Items 
13:22 – ES6 Filter
15:20 – React Hooks
19:02 – ES6 Rest Spread
20:23 – Conclusion

Course Code: 
https://github.com/leerob/mastering-nextjs/tree/master/course/react
https://github.com/leerob/daydrink

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

React Overview – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- Installing Next.js
- Running locally
- Linting
- Formatting

Course Code: 
https://github.com/leerob/mastering-nextjs
https://github.com/leerob/daydrink

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

Developing Locally – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- Link (client-side routing)
- withRouter
- getInitialProps
- Retrieving data from URLs

Course Code: 
https://github.com/leerob/mastering-nextjs/tree/master/course/navigation
https://github.com/leerob/daydrink

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

Navigating Between Pages – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- CSS (Importing & Using)
- Sass
- CSS-in-JS (Custom _app.js)
- Styled-Components
- Responsive + Mobile-First Design

Course Code: 
https://github.com/leerob/mastering-nextjs/tree/master/course/styling
https://github.com/leerob/daydrink

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

Styling (CSS, Sass, CSS-in-JS) – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- Custom Server
- Node.js & API Routes
- GraphQL
- Hasura

Course Code: 
https://github.com/leerob/mastering-nextjs/tree/master/course/fetching-data
https://github.com/leerob/daydrink

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

Fetching Data (API Routes, GraphQL, Hasura) – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- Static Assets
- Public Files
- Image Compression / Optimization
- Custom _document.js
- Open Graph (OG) tags

Course Code: 
https://github.com/leerob/mastering-nextjs-old-site
https://github.com/leerob/daydrink

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

Managing Assets and SEO – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- MDX vs CMS
- Initial Setup
- Managing Posts
- Building Forms (StaticKit)
- Using a Component Library (Theme UI)

Course Code: 
https://github.com/leerob/mastering-nextjs
https://github.com/leerob/daydrink

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

Building A Blog With MDX (+ Theme UI / StaticKit) – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- What is a JWT?
- Auth0
- Firebase Auth
- Login & Signup Pages

Course Code: 
https://github.com/leerob/mastering-nextjs
https://github.com/leerob/daydrink

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

Authentication (Auth0, Firebase) – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- Unit test vs Integration test
- Jest Snapshot Testing
- React Testing Library
- Sentry Plugin
- Custom Error Page (_error.js)

Course Code: 
https://github.com/leerob/mastering-nextjs
https://github.com/leerob/daydrink

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

Testing & Error Handling (Jest, React Testing Library) – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- Redux
- React Context
- Adding TypeScript
- Dynamic Imports

Course Code: 
https://github.com/leerob/mastering-nextjs
https://github.com/leerob/daydrink

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

State Management & More (Redux, React Context, TypeScript) – Learn Next.js

Companies all over the world are using Next.js to build performant, scalable applications. In this video, we'll talk about...

- Static Pre-Rendering
- Serverless Functions
- Zeit Now
- Netlify

Course Code: 
https://github.com/leerob/mastering-nextjs
https://github.com/leerob/daydrink

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

Exporting & Deployment (Vercel, Netlify) – Learn Next.js

Learn how to build & deploy a static site using Next.js, Prisma, and a SQLite database.

Demo: https://prisma-next.now.sh/
Starter Code: https://github.com/leerob/next-prisma-starter
Completed Code: https://github.com/leerob/next-prisma

Other Links
----
Next.js Course: https://masteringnextjs.com/
Next.js RFC: https://github.com/zeit/next.js/discussions/11552
Next.js 9.3: https://nextjs.org/blog/next-9-3
Prisma Quickstart: https://www.prisma.io/docs/getting-started/quickstart
Blog Post: https://leerob.io/blog/next-prisma
Chakra UI: https://chakra-ui.com/

Me
----
https://leerob.io/
https://twitter.com/leeerob
https://github.com/leerob

#nextjs #react #prisma

Static Sites with Next.js 9.3 and Prisma

Learn how to build static and server-rendered applications with Next.js and React.

Learn Next.js – A free video course on React and Next.js.

Rebuilding my self-hosted blog with Next.js and Ghost as a headless CMS.

Using Ghost as a Headless CMS with Next.js

Next.js 9.1 leverages convention to support more project structures by default. Additionally, we're previewing new feature support such as CSS imports, advanced bundling, and static error pages.

Next.js 9.1

Next.js 9.0 was released approximately two months ago. Since then, we’ve been busy with 7 smaller but quite important releases. Let’s dive into what these releases have brought to your websites and applications, with absolutely no breaking changes.

Next.js 9.3 (nextjs.org)

Next.js Tutorial February 24th, 2020

Next.js Tutorial - Part 1 | Router for Beginners

Next.js Router Update: Changes from Next 9.2 to ...

Next.js Tutorial - Part 2 | Data Fetching with ...

Next.js Tutorial - Part 3 | TypeScript Migration

Next.js Tutorial - Part 4 | API Routes using SQL ...

Next.js Tutorial - Part 5 | Material-ui ...

Next.js Tutorial - Part 6 | Authentication for ...

Next.js Tutorial - Part 7 | Consume ...

Next.js Tutorial - Part 8 | Static Site ...

Next.js Tutorial - Part 9 | Data Fetching with ...

Next.js Tutorial - Part 10 | Environment ...

Next.js 9.2 (nextjs.org)

New Next.js Documentation (nextjs.org)

Next.js 9.1.7 (nextjs.org)

Learn Next.js January 5th, 2020

Introduction to Next.js – Next vs. Gatsby vs. CRA

React Overview – Learn Next.js

Developing Locally – Learn Next.js

Navigating Between Pages – Learn Next.js

Styling (CSS, Sass, CSS-in-JS) – Learn Next.js

Fetching Data (API Routes, GraphQL, Hasura) – ...

Managing Assets and SEO – Learn Next.js

Building A Blog With MDX (+ Theme UI / ...

Authentication (Auth0, Firebase) – Learn Next.js

Testing & Error Handling (Jest, React Testing ...

State Management & More (Redux, React Context, ...

Exporting & Deployment (Vercel, Netlify) – Learn ...

Static Sites with Next.js 9.3 and Prisma

Learn Next.js – A free video course on React and Next.js. (masteringnextjs.com)

Using Ghost as a Headless CMS with Next.js (brianlovin.com)

Next.js 9.1 (nextjs.org)

Next.js 9.0.7 (nextjs.org)