Creating Our First App in Next.js - Beginner's Guide

Single page JavaScript applications continue to be highly popular. However, building them within minutes is easier said than done. Often, we need to create the applications, then focus on routing, server-side rendering, and a lot more.

This is probably why many newer developers focus on PHP for their production-level applications. There is no need to worry about routing as such, as anything that is coded in PHP can be deployed and rendered on the server fairly easily.

With that said, Next.js is the solution to the above problem. It is a simple React framework that comes with native server-rendering, client-side page-based routing as well as automatic code-splitting.

In this article, we will be learning how to get started with Next.js and how to get the most out of it.

What is Next.js?

As already mentioned above, Next.js is a lightweight JavaScript framework. It is built atop existing React libraries and comes with faster server-side rendering. The best part about Next.js is that it is fully server agnostic, and can be deployed to any Node.js server or even used with its own in-built HTTP server.

Next.js brings a good deal of features to the table, such as:

• Server-side rendering by default
• Page-based client-side routing
• Easy deployment to any HTTP server
• Easy customization and support for Webpack-based environment
• Automatic code splitting (faster page loading)

Getting started with Next.js is fairly straightforward, and let's do that right away!

Getting Started with Next.js

We can install Next.js using npm, as follows:

default
npm install next react react-dom

We can choose to structure our project the way we want to, but there is one broad rule that is worth following -- all actual web pages should be inside the /pages directory. As such, our project directory should have a /pages sub-directory for this purpose.

Next, we can update our package.json file as follows:

json
{
"Scripts": {
“dev”: “next”,
“build”: “next build”,
“start”: “next start”
    }
}

We have now setup Next.js and can go ahead with actual development. Easy, wasn't it?

The next step is to create our first component. Considering the fact that Next.js rests on top of React, components form the backbone of our workflow here.

Our First Next.js Component

We need to create the relevant files in the /pages directory, as described above. It is worth noting that routing is done by the component name itself. As such, example.com/about will be rendered from an about.js file within the /pages directory, and so on.

We will navigate to our /pages directory, and then create an index.js file therein. Next, we can create our first component in the index.js file. For example, the following simple component can return some basic HTML:

default
const Index = () => (
    <div>
        <h1>This is Next.js</h1>
        <p>This is my first page rendered using Next.js :)</p>
    </div>
)
export default Index

The next step is to run the following command:

default
npm run dev

And when we navigate to localhost:3000 in the web browser, we will see that our page is live as rendered HTML.

At this point, we have already seen server rendering and indexing in action in Next.js

Working with Custom Reusable Components

We can break our pages into smaller reusable components that we can make use of as and when required. In fact, Next.js does not have a strong opinionated structure regarding this -- all we need to bear in mind is that anything in the /pages directory is accessible to the public, whereas any components outside of the said directory are not accessible to the world.

As such, for the sake of privacy and security, it is often a good idea to create a separate /components directory so that we can place our smaller reusable components within it. Upon navigating to the /components directory, we can create our components, such as a custom header.js file that might look like something such as this:

default
const Header = () => (
    <div>
        <h1>This is Next.js</h1>
    </div>
)
export default Header

The next step, obviously, is to go back to the index.js file and integrate the header, as follows:

default
import Header from './components/header';
const Index = () => (
    <div>
        <Header />
        <p>This is my first page rendered using Next.js :)</p>
    </div>
)
export default Index

In the above example, our Header component helped us avoid adding one H1 tag in the Index file. However, in bigger projects, such reusable components can help us save a lot of time and effort in the long run.

Serving Static Files

For serving static assets such as images, Next.js uses a directory called 'static'. As such, we need to create a /static folder in our project's directory, and then place all our static assets therein. Be advised though, renaming the /static directory is not possible as Next.js uses the 'static' name itself to fetch and serve all static files.

In our code, we can then make references to the /static assets, as follows:

default
function MyFilez() {
  return <img src="/static/some-image.png" alt="some image" />;
}
export default MyFilez;

Conclusion

In this post, we learned how to install Next.js, create new projects, work with components as well as how to serve static assets.

We can continue to build upon this knowledge and delve deeper into Next.js

The official documentation is a good place to start, and contains a lot of useful information for JavaScript developers looking to get started with Next.js development. Check it out here.