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>neveropen Code</h3> <CopyBlock text="print('neveropen')" 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:
