How to Localise content in NextJS

Introduction

Welcome to this tutorial on creating search functionality for a Next.js markdown blog using custom NodeJS scripts and a Next.js API endpoint. API routing in Next.js makes it remarkably easy to create custom API endpoints with little effort. In this tutorial, we'll walk through the steps involved in setting up a cache, implementing a search API with Fuse.js, building a UI to search through posts and finally automating the process with pre-commit hooks.

Prerequisites

For this tutorial you will need access to a terminal with npm installed and ideally an empty git repository to work in (you can omit the pre-commit hooks steps if not).

Getting started

We're going to use the 'Blog Starter Kit' from vercel.com as a starting point. This template already includes some markdown posts which we can use to test our cache and API.

To set up the starter kit, run npx create-next-app --example blog-starter blog-starter-app from an empty directory in the terminal.

Once the installation is complete: using the terminal run npm run dev in the root directory (blog-starter-app) and load up localhost:3000 (or whatever URL is provided in the terminal). It should look something like this.