Vijay Thirugnanam

Brief summary of NextJS Features

Vijay Thirugnanam's photo
Vijay Thirugnanam
·

3 min read

NextJS is a framework for creating SEO friendly, full stack apps. Alternatively, it is also useful for building static sites. In this article, I will list down all the most commonly used NextJS features:

File based Routing

NextJS has a pages folder where we can define all the routes. There is an index.js file for the home page. We can create another route by creating a new file and exporting a page component from within it. For example, to create an /about route, simply create an about.js file within the pages folder.

Dynamic routes

If a file has square brackets like so: [id].js, it is considered as a dynamic route. The ID that is supplied as a route parameter can be retrieved programmatically.

Creating a layout page

Create a layout component in another folder like src/common folder. And use that Layout component within the _app.js file as a wrapper component.

import Layout from '../src/common/Layout';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

Head component

Head component allows developers to specify title of the page and meta tags from anywhere within a component. Open any component and use the Head component like so:

import Head from 'next/head';

export default function HomePage() {
  return (
    <div>
      <Head>
        <title>Home page title</title>
        <meta name="description" content="Some SEO friendly description" />
     </Head>
    </div>
  )
}

getStaticProps function

At build time, we can query a database and supply additional props to page components by defining this function in the same file as the page component.

export async function getStaticProps(context) {
  return {
    props: await propsFromDbQuery()
  };
}

There is also a getStaticPaths function that is useful for giving values to dynamic routes. For example, if we have a dynamic route like so: /post/[id].js, we give concrete values for ids in getStaticPaths function. These concrete values again come from a database.

getServerSideProps function

This is similar to getStaticProps function but this function is called on every page request, not at build time. Whenever a request comes for a page, server computes this function and adds additional props to the page component.

API routes

NextJS has full stack capability as it allows to create APIs. Simply create an API folder within the pages folder. And define APIs in the same way as we define pages. To create an API with /api/hello, create a hello.js file that will export a handler function like so.

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}

The request and response parameters to this function is similar to Express request and response objects.

Environment variables

Environment variables can be defined in .env, .env.local, .env.development or .env.production. This is similar to how create-react-app apps work.

Build

To build, use the next build command. To build a static site, after the build command, run next export. The build command produces its output in the .next folder. And the export command produces its output in the out folder.

Deployment

Deploy to anywhere where NodeJS server is supported. Vercel and Netlify are excellent options. Specify the github repository, the build command and build output directory. And Vercel and Netlify will take care of the rest of the deployment.

I have written an elaborate blogpost with an example on how to use NextJS.

Next.jsSSR