Create & Deploy a Universal React App using Zeit Next

[00:00] I'm starting with an empty directory, and I'm going run mpm anit, passing the Y flag to create a package.json with the default options. I'll also install Next by typing mpmi-s to save it next. I want a directory called "pages," so I'll just do that right here in the terminal. Then, we can switch to our editor.

[00:20] I'm going to open up package.json. In the script section, I'm going to get rid of this test script. I'm going to create a dev script, and that's simply going to call Next. I'm also going to create a start script, which is going to call Next start. I'm going to create a build script. That's going to call Next build.

[00:46] Now, my scripts are set up, I'm going to jump back into the terminal and mpm run dev. We'll get a message that the app is ready on local host 3,000. When I load that in the browser, I'll be greeted with a 404, because I haven't created an content yet.

[01:01] To create some content, I'm going to start by adding a file to our pages directory. I'm going to call this index.js. I'll start by importing React. I'm going to export a function as the default.

[01:16] I'll just use an arrow function here. I want to return some jsx for my file, so I'll start with a div. I'll throw an H1 in there. In dev mode, Next is going to use use hot module reloading, as soon as I save this, we'll see the browser update. Our greeting is displayed.

[01:33] Now, let's say my application needs a contact page. I'd like that contact page to map to a route called /contact. If I go there now, I'm going to get a 404. All I have to do in Next to create this contact route is add another file to pages. I'll call that "contact.js."

[01:50] I'm going to import React again. I'm going to create another default export, but instead of a stateless functional component this time, I'm going to use React's component class. I'll give the class a render method. From render, I'll return some JSX. Again, when I save this, it'll refresh the browser and show us our message.

[02:14] When you use a React component with Next, you get access to all of React's normal life cycle events. You also get another one, get initial props. We can use get initial props to vary our property values based on whether we're rendering on the client or the server.

[02:29] Let's grab the request out of the arguments. I'm going to create a variable called "render location." If the request is defined, then I know I'm on the server. Otherwise, I'm on the client. I'm just going to return an object that includes render location.

[02:50] Now that I have this property, I'll just add some content that outputs to the page. When I save this, we'll see our updated message. This page was rendered on the server.

[03:00] Let's go back to our default page. I'll just update the URL. In my index.js, I want a way to get to the contacts page. I'm going to import link from Next/link. This is going to give us a link that works with the Next router.

[03:24] In here, I'm going to say link href equals, and we'll just do /contact. I'll save that. Our link will show up. When I click on the link, it'll take me to our contact route. We'll see this time that the page was rendered on the client.

[03:41] Now of course, I'm going to want navigation on all of my pages. Rather than duplicating this on all the pages, I can use a standard React component.

[03:51] I'm going to create a new folder, call it components. I'm going to keep it out of the pages directory so that this isn't mistaken as a component that represents a route. I'm going to create a new file. I'll just call it nav.js.

[04:07] In my nav file, I'll import React and the link component from Next. Now, I'll create a default export. We'll just make this a function. We'll throw some JSX in there so I have a div with two links and a space in between thing. From here, I'll jump into index.js and I'm going to take that link that we had and get rid of it.

[04:28] Instead of importing link from Next, I'm going to import nav from my components directory. Now, I can use that just like any other React component. I'll throw nav in there. I'll save this. I'll go back to my home route, and we'll see that we have a home and a contact link. If I click contact, it'll take me to the contact route which has been rendered on the client.

[04:57] Of course, I can jump onto the contacts page and include my nav there. I just need to make sure I import it at the top of the file. When I save that, my page'll be updated and I can go between home and contact.

[05:13] You may have noticed as we went along that this .next directory got created here. This has distribution files and files related to web packs, so we don't really need to dig into that.

[05:23] But what I do want to do is add a file. This is going to be a .mpm ignore file. I'm just going to populate that with .next. I'm basically going to tell mpm to ignore this .next directory. With that in place, I can jump back into the terminal. I can deploy this by simply running now. If I jump into my browser, I can paste the URL that I was just given.

[05:57] We can see now building this. When it's done, we'll see that everything's running on the now servers. I can refresh this, make sure that we render on the server, and if I use my router, it'll render on the client...