React and server side rendering with Next.js

Introduction
React, angular, and vue are traditionally client side rendered frameworks that are run in the browser. There are technologies that can run them server-side making them easier and faster to work with. We will talk about one of the frameworks and a brief intro to all of the different things this framework offers. Because Next.js is based off of using React js, to get started working with it a little react knowledge will be great. if you are a little fuzzy on some react concepts I have some great blogs breaking down core react concepts. Now let's talk about Next.js.

Whats is Next.js
Next.js is a minimalist framework for server side rendering of react applications. This framework makes using react easier because it has a lot of built in things under the hood such as:
Server rendered react-apps, page routing, automated code splitting, hot reloading, deployment and built in css support(styles jsx). Once Next.js is installed, we don’t need to do anything on the react side because it is already built in for us.

Getting Started
First thing you need to do is install Next.js
Npm install next react react-dom
After Next.js is installed we can add some scripts to our package json file

"scripts": {
   "dev": "next",
   "build": "next build",
   "start": "next start"
 }

The package json will have the start script with the server running on port 3000. There is no need to run webpack or anything else dealing with react since it's already built in, that happens behind the scenes. After we install everything and add the scripts, we can create our index.js within a folder called pages. Lets look at an example of a basic index.js.

export default function First() {
  return (
     <div className="homepage-container">
       <h1>My first page</h1>
     </div>
  )
}

This is us creating a basic index.js file that will render a header. You must use export default inside the file such as with react because this is essentially a react based framework. The export default could go at the bottom of the file but i chose to put it with the function.

Page Navigation
Next.js has a file-system based router built on the concept of pages. In next.js there's a folder called pages. This folder houses all of your react components. The pages folder has built in routing. The built in router means that react-router techniques are made easier. They take advantage of the *Link*functionality in the react router. Whenever you create a new file inside the pages folder, routing is automatically added as the path of that file. In the above example we created a index.js file inside the pages folder.The page will automatically route files with index.js to the ‘/’ root. Let's look at an example of routing by creating another page called first.js

import Link from 'next/link'
export default function First() {
  return (
     <div className="homepage-container">
       <h1>My first page</h1>
      This is for home <Link href="/"><a>To homepage</a></Link>
     </div>
  )
}

So we can start by writing the same code we did for the index.js file. Next we need to import Link so that we can have links set up to different pages. then re need to use the Link tag and give it a reference. so our reference will be set on the home page or index.js.
We can also do the same for the homepage so our updated file will look like this.

import Link from 'next/link'
export default function Home() {
  return (
     <div className="homepage-container">
       <h1>My Next.js Home page</h1>
       This is for first<Link href="/first"><a>To first page</a></Link>
     </div>
  )
}

Code Splitting
Another built in feature of Next.js is its ability to only run code that is needed at that moment. Because of this it allows the page to load and be quicker. SO that means if you're viewing the homepage then any code that is not dealing with the homepage is not running.

Api’s
API routes provide a solution to build your API with Next.js.
You first need to create an api folder inside pages folder
Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a Page. Let's look at an example of how this function will look:

export default (req, res) => {
 res.statusCode = 200
 res.setHeader('Content-Type', 'application/json')
 res.end(JSON.stringify({name:'Neisha'}))
}

Typescript
Another great thing about Next.js is that it provides an integrated Typescript experience out of the box.
Setup is simple, you can create a folder in the root called tsconfig.json.
Next you will config this file with default values.
When you run npm run dev the terminal will guide you on how to finish installation to start your typescript refactoring.

Deployment
The creators of Next.js have a platform called vercel for deploying. If your project is on a git platform, you can create a vercel account and link the project to the account. Once the account is linked you can then import your project. Once the project is imported, vercel will automatically detect that the project is a Next.js project and do the build config. During development of your Next.js project and deployment phase, they follow the DVP model that stands for: Develop, preview, and ship. In the preview phase vercel automatically creates a new deployment environment with a unique URL where your project can be viewed to preview it when you open a pull request on github. To ship the project just merge the pull request to the master branch, vercel automatically creates a production environment for you.

Conclusion

Next.js optimizes your application for the best performance by code splitting, client-side navigation, and easy deployment.
You can create routes as files under pages and use the built-in Link component. No routing libraries are required.
There is built in functionality that makes creating an app simple and easy which makes Next.js a great framework to learn to pair with your React knowledge.