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 our CodeBlock 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.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg

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.

Adding the Clock: We can easily add the codeblock in our app after installing the react-code-blocks package. For this example, we are going to add the codeblock to our homepage.

Add the below content in the index.js file:

Javascript

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: