Next.js from the Ground Up with Cassidy Williams
Next.js Introduction: What is Next.js?
What is Next.js? Why would you use it? What does it support? In this stage, you'll get a brief intro on the basics before we dive into the code.
[00:01:10] Now, for a lot of frameworks, this might seem like a no-brainer but with Next.js it's built right in. As you edit your code, it will automatically be updating in the browser. What's really cool about [00:01:20] Next's hot code reloading is the fact that it actually uses the React Fast Refresh. React Fast Refresh means that you can update your code and it will actually maintain [00:01:30] the state of your application as your code is reloading. Let's just say as a very simple example, I have a counter and I increase the count to five.
[00:01:40] If I want to update the styles in my application, I might update the style and then I have to re-trigger the counter to go all the way back up to five again to just make sure that the styles [00:01:50] match up. With React Fast Refresh, you don't have to do that anymore. It maintains the state of the application as you update your code. That is really, really nice to be able to have just [00:02:00] built into the framework. There's also tons of styling options that come built in with Next.js. In fact, you don't have to do any special configuration at all if you want to use [00:02:10] SASS, LESS, any other pre-processors, if you want to use CSS modules or some other CSS and JS library like Styled-JSX, it just works.
[00:03:00] Now, the next most important thing to talk about is how routing works in Next.js. This is something that might take a little bit of getting used to, but long story short, there's a pages directory [00:03:10] that's built into every Next application. In that pages directory, you have an index.js. That's your homepage. If you want to make, for example, a contact page, you make a contact.js [00:03:20] inside of that directory and it's a route. That's it. It's page-based routing. Every single time you have some kind of React component in the [00:03:30] pages directory, that is a page that is a route that is automatically done. There is some functionality with the routing that you can play around with, which we'll get to in the next section.
[00:03:40] The API that comes with Next.js is nice and clean, useful and it doesn't have a lot of frilly things that you don't necessarily need. The first function [00:03:50] that's built into the API is next/link. Next/link is a really nice React component that wraps your anchor tags. What's really nice is even when you have a [00:04:00] statically generated website, it does client-side transitions in between each of the pages. It's a really, really nice smooth transition between them. There's a lot of really nice functionality [00:04:10] attached to the links as well. The next one is head. This allows you to put whatever meta-tags or title changes or whatever you want in a head component, [00:04:20] and you can programmatically change the head of your website however needed with this head API. Then this next one, what we just talked about a little bit earlier is the router. Now, you [00:04:30] do have page-based routing, so you don't need to set up a big file that has all of your routes planned out. With this router API, you have some hooks and some nice functionality that allow you to push new [00:04:40] routes and do redirects all within some really nice hooks. This last bit of the API is one that you might've already heard before and it's called next/amp. AMP is a web component framework [00:04:50] that you can use to create user-first websites, stories, emails and ads. It's a part of Google AMP and a lot of people when they want to build their websites, they want to include some AMP functionality [00:05:00] out of the box. The Google development team actually helped build this part of the API, and it's really nice and useful If you want to include AMP pages in your applications.
[00:06:18][END OF AUDIO]