How to add CodeBlock in Next.js ?

In this article, we are going to learn how we can add CodeBlock in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.

Approach

To add CodeBlock in Next.js application we are going to use the react-code-blocks package. The react-code-blocks package helps us to add CodeBlock anywhere in our app. So first, we will install the react-code-blocks package and then we will add a codeblock on our homepage.

Steps to Create Next.js Project

Step 1: Initialize a new Next.js project using the below command

npx create-next-app gfg

Step 2: Move to the project directory

cd gfg

Step 3: Install the required package

Now we will install the react-code-blocks package using the below command:

npm i react-code-blocks

Project Structure:

It will look like this.

Example: This example demonstartes adding codeblock in next.js with the help of react-code-block package form NPM.

// pages/index.js

import React from 'react'
import { CopyBlock, dracula } from 'react-code-blocks'

export default function CodeBlockk() {
    return (
        <div>
            <h3>GeeksforGeeks Code</h3>
            <CopyBlock
                text="print('GeeksforGeeks')"
                language='python'
                showLineNumbers='true'
                wrapLines
                theme={dracula}
            />
        </div>
    )
}

Explanation: In the above example first, we are importing the CopyBlock component from the installed package. After that, we are adding the text, language, and other parameters in our CopyBlock component.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: