Jamstack Explorers

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:00:00] Hi there. You want to learn Next.js? Luckily, we're here for you, so that way you can learn. Now, before we actually go into all of the different [00:00:10] coding options and methods and functions and APIs and stuff, let's talk about why Next.js. Why is it such a big deal? Why should you learn it? Now, Next.js is a framework [00:00:20] on top of a React. You can think of React as a library that enhances your existing JavaScript. Whereas Next.js is a framework around React that has a little [00:00:30] bit more structure. That way you have some functions that are useful for you that help you out a little bit more, but it also tells you where those files should go. Next.js first [00:00:40] got popular because it allowed you to Server-Side Render your applications or SSR them. Then in March 2020, Next.js released the ability to export your Next.js [00:00:50] application to a static website. Let's talk about some of the awesome features that you can build with it, and then we'll get into coding. Now, first of all, what features should you know about before you [00:01:00] start writing any code at all? There's a lot of really nice developer experience nice-to-haves that come built in with Next.js. The first one is hot code reloading.

[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:02:20] There's tons and tons of styling options. In addition to all of those styling options, there's also language options. If you don't want to write JavaScript and you want to write TypeScript, TypeScript support just [00:02:30] works right out of the box with Next.js. What's also really nice is it has automatic code splitting, which means if you are building up your application and [00:02:40] there's some functions that you use a ton and some functions that you don't use at all, it actually cuts out all of the functions that you don't actually use in your build. You don't have to worry about just a really bloated [00:02:50] application. It just does that for you. These are some really, really useful things that just work. You don't have to do anything. You can do your development and your experience will be great.

[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:05:10] The CLI has four really key functions that are good to know. First of all, next build that builds your application. Next Dev runs your application in Dev mode and that includes [00:05:20] the hot code reloading and all of those developer experience nice-to-haves. Next start makes you run the application in production mode, which means you have to run next build first, so that way [00:05:30] you can run next start, and next export bundles everything together into one big static application. There's also some really nice custom configuration that you can do with [00:05:40] Next.js. First, there's a next.config.js. That is just a custom JavaScript module that you can use kind of like a Webpack module. You can use it to [00:05:50] add certain loaders or add whatever kinds of builder configurations that you'd like. You can also have a jsconfig or a tsconfig to add little bits of configuration, for example, [00:06:00] absolute importing if you would like to set up your code in that way. All this being said, Next.js is a really cool React framework that lets you do a lot with a really [00:06:10] clean API, a lot of freedom and some really cool developer experience nice-to-haves. Now, let's stop talking and let's get to coding.

[00:06:18][END OF AUDIO]


your progress