Introducing Build a Server-rendered ReactJS application with Next.js

Render Text within a Server-side ReactJS App with Next.js 

Implement a custom Material-UI theme on the server using a Higher-order component 

Render Material-UI Components with Next.js

Populate A Next.js Application with Data using Async/Await

Create custom routes within Next.js using ExpressJS

Dynamically Instantiate Routes on Id with Next.js & ExpressJS

Leverage Next.js' getInitialProps lifecycle hook to load individual posts

Style Next.js Application's using CSS-in-JS and styled-jsx

Deploy a Next.js Application to the web with the `now-cli`

Build a Server-rendered ReactJS Application with Next.js v4

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.

Course

Build a Server-rendered ReactJS Application with Next.js v4

Render Text within a Server-side ReactJS App with Next.js

Share this video with your friends