Render Text within a Server-side ReactJS App with Next.js
By default, Next.js will automatically create routes for any .js files inside of a projects pages directory. In this lesson, we’ll get a first-hand look at this and see just how quickly Next.js’ built-in router makes the process of getting started.
Instructor: [00:00] To get started with next, we are going to need to install inside of our project along side React in ReactDOM. Once installed, we can wire up these next commands inside of our scripts object. As you could see, where in the Dev command is going to kick-off this next development server, and start's going to run next start, while build is going to create an optimize build for a project.
[00:28] Right now, our mainly concern with this Dev command though, which is what we're going to be using to develop our application. One of the reason that next is such a awesome tool is to do how quickly that allows us to get working. By creating this page directory, next is automatically going to create routes for us, then map to the files inside here.
[00:49] Since, next now is that we're using React, we don't need to import library, rather, we can use create a status functional component like so. As you could see, I'm just passing with title prop to this component, and making it render the text "Hello" from next js.
[01:09] The only thing that's really imperative is making sure we export our component as the default export, which is going to tell next, where it should be rendering on the page. If we execute that npm run dev command, we should see next starting a development server for us.
[01:29] If we visit our localhost, port 2000, we should see that text propping render to our page. Pretty neat, right?
[01:37] To cap this off, I'm just going to create another file inside this pages directory called above.js. I'm just going to have this render out slightly different text than our index row, and we'll make it say, "Hello," from the above route".
[01:59] All I have to do is save that, and if we go back in our browser and navigate to this, we should see this specific tags is being rendered for us, when we visit this /above URL.