AppDividend
Latest Code Tutorials

Next js Tutorial For Beginners

444

Get real time updates directly on you device, subscribe now.

Next js Tutorial For Beginners is the today’s topic. It is no secret that creating single-page applications can be immensely challenging these days. But with the help of some libraries, frameworks, and tools, it is effortless nowadays. React.js is the common frontend libraries among the Front-end developers. Its virtual dom theory makes React faster and gives us the better application performance. Now, one problem is that Single Page Applications are not at all SEO friendly because it is rendered on the Client side and not Server side. So when the Search Engine crawlers try to send a request, they cannot get our meta content or description and not even the main content. Search Engines do not care about how your app is architected or whatever ideology was used to adjust and fetch the right material. Their bots are not as smart as using your apps as a real user would. All they care about is that once they send their spiders to crawl and index your site, whatever the server provides on the first request is what gets indexed. In our case, all they get is our div tag with an id and bundled JS file, and we can not index our website correctly. So some how, we need a SSR to tackle this problem and in React js, Next.js is the perfect solution.

Next js Tutorial

The solution to this problem is Next js. We need to create the Server Side Rendered apps or SSR apps. Next js is kind of Framework, which we can use to produce the pages on the server side and return that page. So search engine crawler can crawl the website and can index properly. Now let us deep dive into Next.js Tutorial.

Step 1: Install React and Next js.

Okay, first create your project directory.

mkdir next-tutorial

Go into that directory.

cd next-tutorial

Now, install the react and react-dom with the following command.

yarn add react react-dom

# or

npm install react react-dom --save

Step 2: Create pages folder and files.

Inside the root folder, create one folder called pages.

In that folder, create one file called index.js.

// index.js

export default () => (
  <div>
    <p>Hello World!</p>
  </div>
)

Now, inside the package.json file, add the scripts.

{
  "scripts": {
    "dev": "next"
  },
  "dependencies": {
    "next": "^5.1.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  }
}

Go to the root and open your terminal and start the development server.

npm run dev

It will boot up the server at Port: 3000: http://localhost:3000

You can see that our index.js component is rendered. Now, if you see the source of the page, it has complete HTML markup. So that means, the page is provided by the server and then it sends to the client.

Now, create the second page of pages directory called home.js.

// home.js

export default () => (
    <div>
      <p>
        <a href="https://appdividend.com" target="_blank">Home</a>
      </p>
    </div>
)

Now, go to this URL: http://localhost:3000/home

Without creating any other routes, you still get that home.js page. So it all handled by Next.js.

So, if you need to create any page, you need to create inside pages folder, and you need to pass that page name after the root URL, and you can access that page. By default, if you have not created any page, but still you try to access that page, 404 page will be displayed.

Step 3: Client side Rendering different pages.

Server-side rendering is very convenient in your first-page load, but when it comes to navigating inside the website or client-side,  the client-side rendering is a critical point to speed up the page load and improve the overall user experience. Next.js provides us a Link component that you can use to build links. 

// index.js

import Link from 'next/link'

export default () => (
  <div>
    <p>Hello World!</p>
    <Link href="/home">
      <a>Home!</a>
    </Link>
  </div>
)

And your home.js file looks like this.

// home.js

export default () => (
    <div>
      <p>
        <a href="https://appdividend.com" target="_blank">Home</a>
      </p>
    </div>
)

Now, you can be able to Navigate the home page at client-side.

Step 4: Error Pages

We can also define our own custom error page by creating a _error.js page inside pages folder.

// _error.js

import React from 'react'

export default class Error extends React.Component {
  static getInitialProps ({ res, xhr }) {
    const statusCode = res ? res.statusCode : (xhr ? xhr.status : null)
    return { statusCode }
  }

  render () {
    return (
        <p>{
          this.props.statusCode
          ? `${this.props.statusCode} not found`
          : 'An error occurred on client'
        }</p>
      )
  }
}

Now, stop the server and restart it and type the whatever URL except that, which are not included. For example, I can not access /youndu page. http://localhost:3000/yondu.So let us try to access that page and we get an error, which is our custom _error page.

Related Posts
1 of 15

Finally, our Next.js tutorial is over. Thanks for taking.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.