Next.js Setup

1

Introduction

Learn how to use Tetrons and integrate it into your Next.js project. This guide covers setup and embedding the Tetrons editor in a modern Next.js application.

2

Next.js Integration with Tetrons

The official Tetrons Next.js integration will be released soon. For now, we’ll use the TinyMCE React wrapper as a placeholder while following the same structure Tetrons will use.

3

Prerequisites

Node.js ≥ 18, npm or yarn

4

1. Create a Next.js App

1npx create-next-app@latest tetrons-next-demo
5

2. Navigate to Project Directory

1cd tetrons-next-demo
6

3. Install Editor Package

Install TinyMCE React wrapper as a placeholder. Tetrons will release its official package soon (e.g., @tetrons/tetrons-react).

1npm install @tinymce/tinymce-react
7

4. Edit src/App.jsx

1import { useEffect, useState } from "react";
2import { initializeTetrons, isApiKeyValid, EditorContent } from "tetrons";
3import "tetrons/style.css";
4 
5function App() {
6  const apiKey = "your_api_key";
7 
8  const [loading, setLoading] = useState(true);
9  const [isValid, setIsValid] = useState(false);
10  const [error, setError] = useState("");
11 
12  useEffect(() => {
13    console.log("🚀 App mounted in web component iframe");
14 
15    async function validate() {
16      try {
17        console.log("🔑 Validating API key...");
18        await initializeTetrons(apiKey);
19        setIsValid(isApiKeyValid());
20      } catch (err) {
21        console.error("❌ Error validating key", err);
22        setError(err.message);
23      } finally {
24        setLoading(false);
25      }
26    }
27 
28    validate();
29  }, [apiKey]);
30 
31  if (loading) {
32    return <div>🔍 Validating API key...</div>;
33  }
34 
35  if (!isValid) {
36    return <div style={{ color: "red" }}>❌ API Key Invalid: {error}</div>;
37  }
38 
39  return (
40    <div style={{ padding: "2rem" }}>
41      <EditorContent apiKey={apiKey} />
42    </div>
43  );
44}
45 
46export default App;
8

6. Add API Key (Optional)

If required for cloud usage or premium features, replace "no-api-key" with your actual Tetrons API key.

9

Running the Next.js App

1npm run dev
2Press Ctrl + C to stop the server.
10

Build & Deploy

Build the app:
npm run build

Start the production server:
npm start

Deploy to platforms like Vercel, Netlify, or your own server.

Chatbot