NextJS: Leveraging advanced features with TypeScript

Best React frameworks: NextJS

NextJS, a popular React framework, has redefined the way developers build modern, lightning-fast web applications. It provides an excellent developer experience, out-of-the-box performance optimizations, and seamless integration with modern tools. The introduction of static site generation (SSG) and server-side rendering (SSR), along with incrementally static regeneration (ISR) in Next.js, has made it an almost indispensable tool in the ever-evolving world of web development.

Adding TypeScript, a strongly typed superset of JavaScript, to the mix can significantly enhance NextJS applications. TypeScript brings powerful features such as static typing, code navigation, and error reporting, which can save developers time and prevent countless bugs.

In this article, we will explore several advanced features of NextJS, illustrating their usage with TypeScript code examples. By the end of this guide, you will have a deeper understanding of how NextJS and TypeScript can combine to create truly exceptional web applications.

NextJS empowering an amazing React library. You may read about advanced React features in my other article:

Dynamic Imports

Dynamic imports are a modern JavaScript feature that enables developers to split the code into smaller bundles, permitting the loading of various parts (chunks) of your application on demand. This feature can significantly improve your app performance by reducing load time, especially for large and complex applications.

Example:

import dynamic from 'next/dynamic';

// Dynamically import the component
const DynamicComponent = dynamic(
  () => import('../components/DynamicComponent'),
  {
    ssr: false, // Disable server-side rendering for this component
  }
);

const PageComponent = () => (
  <div>
    <p>This is a static content</p>
    <DynamicComponent />
  </div>
);

export default PageComponent;

In the above example, the DynamicComponent will only be loaded when the PageComponent is rendered, thus significantly decreasing the initial loading time for your application.

Incremental Static Regeneration (ISR)

Incremental Static Regeneration is a feature that allows you to update static pages in the background after an initial render without requiring a full rebuild. This feature is especially useful for applications with frequently updated content but low server resources, as it offers optimal performance without slowing down the server.

Example:

export async function getStaticProps() {
  const data = await fetchAPI('https://api.example.com/data');

  return {
    props: {
      data,
    },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

const PageComponent = ({data}) => (
  <div>
    <h1>Example Data</h1>
    {data.map((item) => (
      <div key={item.id}>{item.title}</div>
    ))}
  </div>
);

export default PageComponent;

In the example above, the revalidate the key specifies the regeneration interval. The page will be re-rendered only after 60 seconds have elapsed since the last successful request.

Automatic static optimization (ASO)

In Next.js, automatic static optimization is the default behavior for pages that are pre-rendered using getStaticProps or getStaticPaths. Combining this with TypeScript involves configuring Next.js to work seamlessly with TypeScript.

To benefit from this feature, all you need to do is avoid adding data-fetching methods like getInitialProps or getServerSideProps in your pages. Next.js will then generate static HTML at build time. Here's an example of a simple page written in Next.js.

Example:

// pages/example.tsx

import { GetStaticProps } from 'next';

interface ExampleProps {
  data: string;
}

const ExamplePage = ({ data }: ExampleProps) => {
  return (
    <div>
      <h1>Example Page</h1>
      <p>Data: {data}</p>
    </div>
  );
};

export const getStaticProps: GetStaticProps<ExampleProps> = async () => {
  // Fetch data (replace with your data fetching logic)
  const data = 'This is some dynamic data fetched at build time';

  return {
    props: {
      data,
    },
  };
};

export default ExamplePage;

• The ExamplePage component represents your Next.js page.
• getStaticProps is a function that Next.js calls at build time to fetch data for pre-rendering.
• In this example, it fetches some data (could be from an API, database, etc.) and passes it as props to the ExamplePage component.
• GetStaticProps is typed ExampleProps to define the structure of props that the page expects.

Remember, by using getStaticProps, Next.js will pre-render this page at build time and optimize it as a static page, serving the static HTML to the client.

Ensure that your tsconfig.json has proper TypeScript configuration for Next.js, and you can leverage TypeScript types and interfaces throughout your Next.js application for static optimization or any other functionalities.

Server-side rendering (SSR)

Server-side rendering (SSR) refers to rendering your web application on the server, and then sending the final HTML to the client. SSR can improve SEO and speed up the initial page load. Next.js makes it easy to achieve SSR by running your React components on the server.

To fetch data on the server side, we will use getServerSideProps

Example:

import { GetServerSideProps } from 'next';
import React from 'react';

interface HomeProps {
  serverTime: string;
}

const Home: React.FC<HomeProps> = ({ serverTime }) => {
  return (
    <div>
      <h1>Hello Next.js!</h1>
      <p>Server time: {serverTime}</p>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async () => {
  // Fetch server time (this could be any asynchronous operation)
  const serverTime = new Date().toISOString();

  return {
    props: {
      serverTime,
    },
  };
};

export default Home;

In this example:

• GetServerSideProps is used to fetch data at the request time before the page is rendered.
• We define the Home component that receives serverTime as a prop fetched from the server.
• Inside getServerSideProps, we retrieve the current server time and pass it as a prop to the Home component.

If you are interested in other interesting Frameworks rendering approaches you may read my article about advanced Vue features and its concept of createRenderer API:

Static site generation (SSG)

Next.js also lets you create fully static sites. You can achieve this by exporting your website during the build process.

To fetch data at build time, use the getStaticProps function.

Example:

As an example, let’s create a simple interface for a blog post:

// types/Post.ts
export interface Post {
  id: number;
  title: string;
  content: string;
  date: string;
}

Now, create a function to fetch some example data. For the sake of this example, let’s create a file called data.ts:

// lib/data.ts
import { Post } from '../types/Post';

export function getAllPosts(): Post[] {
  // Fetch posts from an API or mock data
  return [
    {
      id: 1,
      title: 'First Post',
      content: 'Content of the first post...',
      date: '2023-11-23',
    },
    // Add more posts here if needed
  ];
}

Create a page to display these posts. For instance, a simple page that lists all posts:

// pages/posts.tsx
import { GetStaticProps } from 'next';
import { Post } from '../types/Post';
import { getAllPosts } from '../lib/data';

interface PostsProps {
  posts: Post[];
}

const Posts = ({ posts }: PostsProps) => {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
            <p>Date: {post.date}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const posts = getAllPosts();
  return {
    props: { posts },
  };
};

export default Posts;

Run your Next.js app using:

npm run dev

Then, access the posts page at http://localhost:3000/posts in your browser. This example fetches data during the build time using getStaticProps and displays it in a simple list. You can expand upon this structure by adding more pages, components, and styling as needed for your static site.

Middleware

Middleware is a new addition to NextJS that offers additional control over your app’s server-side rendering process. It enables you to modify incoming requests, perform authentication, make API calls, or handle redirects before the page is rendered. This allows you to keep complex logic separate from your page’s React components and create cleaner components and functions.

Example:

// pages/_middleware.ts
import {NextRequest, NextResponse} from 'next/server';

export function middleware(req: NextRequest) {
  const userIsAuthenticated = checkAuthentication(req);

  if (!userIsAuthenticated) {
    return NextResponse.redirect('/login');
  }

  return NextResponse.next();
}

In the example above, the middleware checks if the user is authenticated before rendering any page. If the user is not authenticated, they are redirected to the login page.

Custom Server

Some applications with specific needs may require a custom server to handle unique setups like long-lasting connections or WebSockets. NextJS provides a built-in server but also allows you to create a custom server using Express or other popular libraries.

Example:

// server.ts
import next from 'next';
import express from 'express';

const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({dev});
const handle = nextApp.getRequestHandler();

nextApp.prepare().then(() => {
  const app = express();

  app.get('/custom-route', (req, res) => {
    res.send('This is your custom route using Express');
  });

  app.all('*', (req, res) => {
    return handle(req, res);
  });

  app.listen(3000, () => {
    console.log('> Ready on http://localhost:3000');
  });
});

In the example above, a custom server using Express listens on port 3000 and serves a custom route page. All other requests are handled by the NextJS app.

API routes

Next.js includes built-in support to create API routes in your application. To create an API route, you need to create a new file inside the pages/api folder. The file name will determine the endpoint (e.g., pages/api/user.ts will create a /api/user endpoint).

Example:

// pages/api/example.ts

import { NextApiRequest, NextApiResponse } from 'next';

// Define types for request and response
interface CustomRequest extends NextApiRequest {
  // Define any custom properties you might need
  // For example, if you expect a certain parameter in the request
  query: {
    param: string;
  };
}

interface CustomResponse extends NextApiResponse {
  // Define any custom properties for the response
}

// Example API route handler
export default function handler(req: CustomRequest, res: CustomResponse) {
  const {
    query: { param },
  } = req;

  // Access the query parameter
  console.log('Received param:', param);

  try {
    // Perform any necessary operations
    // Return data in JSON format
    res.status(200).json({ message: `Received param: ${param}` });
  } catch (error) {
    // Handle errors
    res.status(500).json({ error: 'Internal server error' });
  }
}

You can define custom types for the request and response objects to add type safety to your code.

Remember to restart your Next.js server after creating or modifying API routes for the changes to take effect.

Hot Module Replacement (HMR)

Next.js provides built-in HMR, which allows updates to be pushed to the browser without needing a page refresh. This enhances the developer experience by providing a faster feedback loop during development.

Example:

Install Required Packages:

npm install --save-dev @types/webpack-env

Configure next.config.js:

Inside your project’s root, create or update next.config.js to enable HMR:

// next.config.js

module.exports = {
  webpack: (config, { dev }) => {
    if (dev) {
      config.plugins.push(new webpack.HotModuleReplacementPlugin());
    }
    return config;
  },
};

Create a TypeScript Page:

For example, create a TypeScript page named index.tsx in the pages directory:

// pages/index.tsx

import { useState } from 'react';

const HomePage = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Next.js with HMR + TypeScript</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default HomePage;

Start the Development Server:

Run your Next.js application in development mode:

npm run dev

This setup should allow you to modify the TypeScript files in the pages directory and witness the changes reflected in your running application without needing a full refresh.

Remember, HMR might have limitations depending on the complexity of your code and the specific libraries or components you’re using. However, it should work seamlessly for most common scenarios, providing live updates during development.

Automatic code splitting

Next.js automatically splits the code into smaller JavaScript bundles, so that users only download the necessary code for each page. This results in faster page loading times and better performance.

File-system based routing

Next.js uses file-system-based routing for easy routing setup. Names of the files in the “pages” folder automatically become routes, making it simple to create and manage routes in your application without explicit router configuration.

Customized environments and configurations

Next.js offers customizable environments and configurations, allowing you to customize various settings like the base path, assets directory, and target environments.

Wide range of plugins

Next.js has a large ecosystem of plugins that simplify integrations with various tools and platforms like CSS-In-JS libraries, Sass, Google Analytics, and more. You can use these plugins to create feature-rich applications with minimal effort.

BONUS. NextJS + ChatGPT API code sample

Let’s have some fun time now and build an example that sets up a simple web app with a form where users can input text, send it to the server, and receive a response generated by ChatGPT.

Create a new Next.js app with TypeScript:

npx create-next-app my-chat-app --typescript
cd my-chat-app

Install required dependencies:

npm install openai axios

Create a new TypeScript file (src/pages/index.tsx) for the main page:

// src/pages/index.tsx
import { useState } from 'react';
import axios from 'axios';

export default function Home() {
  const [inputText, setInputText] = useState('');
  const [response, setResponse] = useState('');

  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputText(e.target.value);
  };

  const handleSubmit = async () => {
    try {
      const apiUrl = '/api/chat'; // Endpoint to handle GPT chat logic

      const res = await axios.post(apiUrl, { text: inputText });

      setResponse(res.data.message);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <div>
      <h1>Chat with GPT-3</h1>
      <textarea
        placeholder="Enter your message..."
        value={inputText}
        onChange={handleInputChange}
      />
      <button onClick={handleSubmit}>Send</button>
      <div>
        <h2>Response:</h2>
        <p>{response}</p>
      </div>
    </div>
  );
}

Create an API route to handle the ChatGPT logic (src/pages/api/chat.ts):

// src/pages/api/chat.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import axios from 'axios';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      const { text } = req.body;
      const openaiApiKey = 'YOUR_OPENAI_API_KEY'; // Replace with your OpenAI API key

      const gptResponse = await axios.post(
        'https://api.openai.com/v1/engines/davinci/completions',
        {
          prompt: text,
          max_tokens: 100,
        },
        {
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${openaiApiKey}`,
          },
        }
      );

      const message = gptResponse.data.choices[0].text.trim();
      res.status(200).json({ message });
    } catch (error) {
      console.error('Error:', error);
      res.status(500).json({ message: 'Server error' });
    }
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

Replace 'YOUR_OPENAI_API_KEY' with your actual OpenAI API key.

Start the development server:

npm run dev

This basic setup allows users to enter text, and submit it to the server, which then uses the OpenAI GPT-3 API to generate a response. Make sure to handle errors and edge cases as needed, and always secure your API keys properly, especially in production environments.

Conclusion

The advanced features of NextJS, when combined with React and TypeScript, allow you to build highly optimized and performant web applications. By adopting dynamic imports, Incremental Static Regeneration, Server-side rendering, Static site generation, Automatic static optimization, middleware, custom servers, HMR, and other features you can create versatile and scalable applications suitable for various production environments.

That’s it! Give Next.js a try and see how it can streamline your React development process!

You may also check out my other articles on Exciting React and Vue Features in 2023, ThreeJS/Shaders practicing and Entertaining Web Geometry:

You may also check out my other articles on Exciting React Features in 2023, ThreeJS/Shaders practicing and Entertaining Web Geometry:

Find me on social networks: Instagram, Facebook, and Twitter.

Also, if you like my articles, you may support my further work:

Enjoy and happy coding!

Example (in TypeScript):