A Quick Introduction to Next.js

Next.js is a React framework used for development of front-end web applications with server rendering by default. This blogpost will help to understand why Next.js makes development life cycle easier and so much fun.

A couple of things that I mostly like about NextJS is we don't need to worry about all of the tooling like webpack compiling, code splitting and all other stuffs, which it does under the hood. All we need to do is type 'next' and done. Our life is as simple as that :)

And to the hardcore config lovers, we can still expose all the babel config and webpack config in additional to whatever Next provides under the hood.

One my favourite part of NextJS is the server side rendering. If we are developing an application and have a lot of data and we need to preload it or if our application needs to be SEO friendly (Search Engine Optimisation! Whew... It took me a while to figure what that term is  😤) then NextJS is our point of contact. The difficulty of server side rendering is that, it is never actually clear when the data fetching is done and when the data is sent to client so that it can be resolved to render the page. So to overcome this problem, react introduced a method getInitialProps that allows the data to be resolved before it is actually sent out to the browser( This is kind of similar to the props property which we pass in reactOnRails )

Coming to the routing part, this is the most favourite part, there is NO ROUTING! Just create the pages and routing is done...

Lets dive into creating our application using next Use the npm to install the package

npm install --save next react react-dom

Give npm run to start our application. Lets quick start with our application. This is my structure

I have created pages folder, in addition to the components folder.
Create a new file in pages folder and name it index.js

import React from 'react';      
const MyExample = props => {	 
  return (
    <div>
      <strong>Hello World</strong>
    </div>
  );
}
export default MyExample;

Hit up your localhost localhost:7777 this is the default port that will be in setup. Feel free to change it to any required port. The root route will always render the page index.js . So anything that has following routes will always and forever will render index.js
localhost:7777
localhost:7777/
localhost:7777?xyz=20

Just a note: We can ignore the import statement of 'react', this will be taken care by Next... (Awesome isn't it.... 😎)

Lets create another file inside page, and call it second.js

import React from "react";
const Second = props => {
  return (
    <div>
      <b>I am the second page..!!!</b>
    </div>
  );
};

export default Second;

Now hit up localhost:7777/second or localhost:777/second?abc=200 or with any query params. The page result will be like this

Put up anything into the pages directory and they start to show inside our routes.

Lets quickly talk about redirecting. Since we are using react application, we would prefer to use HTML 5 push state ( Render from one page to another without having to refresh the page )

The trivial anchor tag will refresh the page, and would remove the cache power that NextJS provides as it refreshes the page.We can use the Link tag, provided by Next which will help us in this task.

Lets modify our above code to make use of Link and to render between the two pages

index.js

import React from "react";
import Link from "next/link";
const MyExample = props => {
  return (
    <div>
      <strong>Hello World</strong>
      <Link href="/second">
        <a> To Second page </a>
      </Link>{" "}
    </div>
  );
};
export default MyExample;

second.js

import React from "react";
import Link from "next/link";
const Second = props => {
  return (
    <div>
      {" "}
      I am the second page
      <Link href="/">
        <a>To home page</a>
      </Link>
    </div>
  );
};
export default Second;

Now if we would check the result, should be able to navigate between the two pages, without actually refreshing the page.

This was just a basic set up and routing with NextJS. Obviously everything cannot be handled in the pages section. We need to use the react components that will be structured under the components folder which will do all the heavy lifting of application logic.

There is still more to it. For further reference and learning, please go through these links, you can find various articles on this.
https://nextjs.org/learn/
https://github.com/zeit/next.js/

For any more questions, queries or suggestions reach out to me on Twitter @bharathegde13