Next.js - Your next go to framework
Tags: react, nextjs, webdev, javascript
Published: 2021-05-25 16:52:47

Next.js is a React framework developed by **Vercel** that is bound to ease your life as a React developer by abstracting away the common and redundant tasks (such as routing) into relatively simpler and powerful APIs. That way, you can focus on writing your apps instead of reinventing the wheel.

**Next.js** is a lightweight open source JavaScript framework built on top of the React library that enables quick server side rendering and is server agnostic (i.e. use with its own built in HTTP server or use with any Node.js server). It is put out by the folks at Zeit. Routing is simply done by the page and makes getting a website up and running easy and quick. In fact, we're going to do in 5 minutes or less.

***Why Next.Js?***

**1) Relatively easy to learn**

That’s it. If you’ve written any React at all, you’d find yourself at home with Next.js. It offers you advanced tools and a robust API support, but it doesn’t force you to use them.

**2) Built-in CSS support**

Writing CSS in component-driven frameworks comes with a sacrosanct need for the “cascade”. It’s why you have CSS-in-JS tools, but Next.js comes out of the box with its own offering — styled-jsx, and also supports a bevy of styling methodologies.

**3) Automatic TypeScript support** 

If you like to code in TypeScript, with Next.js, you literally have automatic support for TypeScript configuration and compilation.

**4) Multiple data fetching technique**

It supports SSG and/or SSR. You can choose to use one or the other, or both.

**5) File-system routing** 

To navigate between one page to another is supported through the file-system of your app. You do not need any special library to handle routing.

***Installation***

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4z88mae7f68owtjr3z0i.png)

We'll use NPM to install Next.js along with its dependencies.

First we'll make a directory to hold our Next.js project and go into it:
```
mkdir my-portfolio-site
cd my-portfolio-site
```
Then we'll initialize it with a *package.json* file and use the *y* flag to just go ahead and do it and skip the questions: *npm init -y*.

Now we are ready to install Next.js:
```
npm install react react-dom next
```
Next.js is not super opinionated on how you structure your project, with one exception. All your actual web pages need to go inside a *pages* folder, so let's go ahead and create it: *mkdir pages*.

Lastly, let's go ahead and update the *package.json* with the run script language to initialize our Next.js app. Open up the *package.json* file and add the following under *scripts*:
```js
"dev": "next",
"build": "next build",
"start": "next start"
```
Great, we've now installed Next.js. So lets dive into it.

***Creating The First Component***

Remember that Next.js is just JavaScript and rests on top of React, so all we need to do is build some components. Routing is done by the name of the component, so for example, *mysite.com/blog*, would be from a *blog.js* named file in the *pages* directory.

Open up the project in your favorite code editor and create a file called *index.js* in the *pages* directory.

Let's create a component that returns some HTML!
```js
const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>Welcome to my portfolio! This is designed with Next.js!</p>
    </div>
)

export default Index
```
Now if you run **npm run dev** from the command line and navigate to ***http://localhost:3000*** from your web browser you will find this content being served.

***Working with Link API***

Don't we all love the page rendering in React? We can accomplish the same client side navigation with Next.js using the Next.js **Link API**. Let's say our portfolio site had a Contact page, so we would have an updated Index component that looked like this:
```js
import Link from 'next/link';

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index
```

First, we imported the Link API module from Next.JS and then we used it inline in the midst of our content by making a placeholder for it with the **{' '}** syntax. The **<Link>** component is a Higher Order Component and supports only a couple arguments such as *href* (and *href* argument itself supports arguments like query strings and the like) and *as* for URL masking. The underlying component, in this case a *<a>* tag supports other props like *style* and *onClick*.

***Making Smaller Reusable Components***
Now we are off to a great start, but can you imagine having to rewrite our header for every page we create? That's why we break up our site into small reusable components!

Next.js has no opinion on how you should do this. But, remember, if you put them in the *pages* directory they will be accessible to to the outside world directly. Do you want someone directly accessing your header, navbar and footer? If not, then place them outside it. Go ahead and create a *components* top level directory: *mkdir components* and *touch header.js* to create a *header.js* file.

Open up the *header.js* file in your code editor and create a header component!
```js
const Header = () => (
    <div>
        <h1>My Portfolio Site</h1>
    </div>
)

export default Header
```
Then go ahead and go back to your *index.js* file and incorporate your new header:
```js
import Link from 'next/link';
import Header from '../components/header';

const Index = () => (
    <div>
        <Header />
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index
```
Now all that new **<Header />** component did was save us one **<h1>** tag, but it doesn't take much imagination to understand that in a real world site there would be a lot more there than just one HTML tag.

We have now successfully installed Next.js, initialized a new project, created components, linked to them using the Next.js Link API and reused components across our project. This is a great foundation to build from.

There is a lot more to Next.js like CSS in the JavaScript, custom server (for example, using Express), passing state between pages and so much more. Please check out the **documentation** to take an even deeper dive and enjoy taking the next step with Next.js!

Thanks for reading.