Jamstack Explorers

Next.js from the Ground Up with Cassidy Williams

Next.js Project Setup

Here's how to set up a basic Next.js project from scratch (as well as an option for some boilerplate).


[00:00:00] Let's set up our first Next.js project. The first thing we'll want to do is actually create some folder for it. I'm going to create a folder [00:00:10] that's just something simple. My next project, that could be a pun but we'll get to that later. [00:00:20] Now go into your project and do an NPM in it to start a project in here. We'll call it my next project. We'll say my first Next.js [00:00:30] project, entry point is index.js. Sure, sure, sure, sure. Just hit enter across all of these. We have started a project [00:00:40] that's just a basic NPM project. Now we're going to install next react and react dom. We'll do NPM install [00:00:50] next, react and react dash dom like that. Now that everything is installed. Now we need [00:01:00] to update our package.json to include the right scripts. I'm going to open this up in my editor. You can open it up in any editor that you'd like and inside [00:01:10] package.json, I'm going to add some scripts. Right now there's this test script. We'll take that out and we'll add dev which will be [00:01:20] next dev. We'll do build, just next build. [00:01:30] Start for next start and export for [00:01:40] next export. Now that we've set up our package.json, we need to create a pages directory. Make a new folder and call it pages. [00:01:50] Then inside of there, we're going to make a new file and call it index.js. Now Next.js is built around the concept of [00:02:00] pages. Pages are just react components but they have a few extra functions which we will talk about a little bit later, but because they are just react components, we can make a [00:02:10] function and we'll call it home. We can take in props if you want to because it's react, but we won't at first. We'll say, return [00:02:20] quick div, welcome explorer. Then we will export default home, [00:02:30] just like this. Now I want to touch on a couple things here. First of all, because we're using Next.js, we don't actually have to import react every single time at [00:02:40] the top of our pages or functions or components. It's automatically built in. You just can remove that one line of code. Now, because we have actually [00:02:50] made this component inside of the pages directory, this is a route, this is an actual page. Just the simple steps that we've done so far has given us [00:03:00] automatic compilation and bundling with Webpack and Babel and because it's using the latest react, we get react fast refresh, meaning if we were to do any state changes [00:03:10] and stuff, it's the latest and greatest version of hot module reloading. Let's actually run this in the browser. Let's head back to our terminal [00:03:20] and do NPM run dev. Now, if you'll recall that runs next dev which is [00:03:30] a Next.js command. Now let's open this up in a browser, look at that. We have a little welcome explorer [00:03:40] just right there, which is exactly what we put in that simple div when we loaded our home component. Now you can add a lot more in here. This is just the bare [00:03:50] bones. You can add your own components directory. You can add more routes. You can add all kinds of stuff. If you don't want to do all of this from the ground up, you can actually go [00:04:00] to this starter repo that I built. It's github.com/cassidoo/next-netlify-starter. With this starter project, it does pretty much exactly what we did. [00:04:10] If you go to the package.json, you can see we have the exact same scripts that we just put in and the exact same dependencies next react and react dom. Then if you go into the pages [00:04:20] directory, you can see that we have an index.js that has a little bit more markup, but it's pretty much the exact same thing. Now, all this [00:04:30] being said with our bare bones project that we just made together, let's set it up for deployment. We'll do that in the next video. [00:04:40][00:04:43]


your progress