Comment créer une application Web qui génère automatiquement des LP dans Chatgpt + Next.js [Openai API + Next.js + Tailwind CSS]

L'URL a été copiée!

des outils d'IA sans code comme "Readdy" ont attiré l'attention.
Nous sommes maintenant à une époque où n'importe qui peut facilement utiliser l'IA, mais
avez-vous déjà pensé: " Je veux intégrer l'IA dans mes services " ou " Je veux le personnaliser plus librement

Dans cet article, nous vous montrerons comment créer
une application Web qui génère automatiquement des LP (pages de destination) à l'aide de Next.js (Router de l'application) , de Tailwind CSS et de l'API de discussion de chat d'Openai

ceux qui trouvent un peu les tracas d'écrire du code ou
ceux qui veulent un modèle avec une interface utilisateur qui fonctionne rapidement, nous avons également publié des modèles sur les plates-formes suivantes.

Les modèles introduits dans cet article sont maintenant en vente!

Ce modèle d'interface utilisateur de chatbot est disponible à la vente sur plusieurs plates-formes.

La structure est parfaite pour ceux qui veulent essayer quelque chose qui fonctionne en premier, "Je veux l'utiliser tout de suite sans construire un environnement" ou "Je veux vérifier l'intégralité du code".

Acheter sur gumroad acheter sur note

Vous pouvez également consulter d'autres modèles à partir de chaque page:

Note de gumroad

table des matières

À propos de la technologie utilisée

Cette application de génération LP est construite en utilisant les technologies suivantes:

Next.js (configuration du routeur de l'application): Un cadre basé sur React vous permet de créer des pages unifiées et des itinéraires API. J'utilise une configuration de routeur d'application à partir de SRC / App
CSS du vent arrière: Un framework CSS d'abord utilitaire qui vous permet d'organiser efficacement vos conceptions à l'aide de classes. Créez rapidement une interface utilisateur réactive et simple
API OpenAI (CHAT ACHELIONS): Il s'agit d'un mécanisme d'interaction avec les modèles basés sur GPT à l'aide du / V1 / Chat / Completions nous avons facilité la commutation entre les variables d'environnement GPT-4.1-min et GPT-3.5-Turbo
Routes API + récupérer: J'écrit le traitement du serveur qui relaie entre le navigateur et l'API OpenAI à l'aide de la racine API suivante ( / API / CHAT des clients utilisant fetch ("/ api / chat")

Créer une clé API OpenAI

Cette fois, nous utiliserons l'API OpenAI, nous devrons donc créer une clé API OpenAI.
Vous serez redirigé vers les touches API dans le tableau de bord API OpenAI. Sélectionnez "Créer une nouvelle clé secrète".

Vous pouvez avoir le projet sélectionné comme vous le souhaitez et sélectionner les autorisations en fonction du modèle que vous souhaitez utiliser, ou sélectionnez tout pour le générer.

Une fois la création terminée, une chaîne commençant par "sk-" sera créée, nous l'utiliserons donc après cela.
Faites attention à ne pas laisser partir cette clé.

Construction environnementale

Tout d'abord, préparez un environnement de développement pour next.js.

Créer un projet

Je vais créer un projet.
Fondamentalement, je pense que c'est bien de tout laisser aux valeurs par défaut, mais c'est bien tant que vous pouvez le changer au besoin.
(Ce projet utilise Tailwind CSS, il est donc préférable de le définir sur oui. La valeur par défaut est oui.)

$ npx create-next-app lp-generator-starter --App --TypeScript Besoin pour installer les packages suivants: create-next-pp@15.4.4 ok pour continuer? (y) ✔ Souhaitez-vous utiliser Eslint? … Non / Oui ✔ Souhaitez-vous utiliser CSS à vent arrière? … Non / Oui ✔ Souhaitez-vous votre code dans un répertoire `src /`? … Non / Oui ✔ Souhaitez-vous utiliser Turbopack pour «Next Dev`? … Non / Oui ✔ Souhaitez-vous personnaliser l'alias d'importation (`@ / *` par défaut)? … Non / Oui Création d'une nouvelle application Next.js dans / LP-Generator-Starter. Utilisation de NPM. Initialisation du projet avec modèle: App-TW Installation des dépendances: - React - React-Dom - Ensuite, installation de DevDependces: - TypeScript - @ Types / Node - @ Types / React - @ Types / React-Dom - @ TailwindCSS / POSTCSSS - TailwindCSS - ESLINT - ESLINT-CONFIG-NEXT - @ ESLINT / ESLIN Les packages 13S 137 recherchent un financement exécuté «NPM Fund» pour les détails trouvés 0 vulnérabilités initialisées un référentiel Git. Succès! Créé LP-Generator-Starter à / LP-Generator-Starter

Si "Success! Créé LP-Generator-Starter at / LP-Generator-Starter" apparaît, la création de projet est terminée.
Une fois que vous avez créé le projet, déplacez le répertoire.

CD-LP-Generator-Starter

Définir la touche API Openai

Créez un .env dans la racine

Openai_api_key = sk -... openai_model = gpt-4.1-mini system_prompt = vous êtes un assistant utile pour créer des LP.

Brève description:

Openai_api_key: clé privée requise pour l'accès à l'API OpenAI (émis par un compte personnel)
Openai_model: le nom du modèle à utiliser. Selon l'objectif, GPT-3.5-turbo , GPT-4.1-min , etc.
System_Prompt: Message initial spécifiant la personnalité et le rôle de l'IA (efficace au début du chat)

Démarrer le serveur de développement

L'exécution de la commande suivante lancera le modèle:

NPM Run Dev

Implémentation de l'interface utilisateur (écran de chat)

L'interface utilisateur de chat est consolidée dans
src / app / page.tsx Le montant total du code source est le suivant:

"Utiliser le client"; import {UseState} de "réact"; Exportation default function home () {// State Management of Input Form // State pour chaque champ de saisie const [ProductName, setProductName] = USESTate (""); const [catégorie, setCategory] = UseState ("web"); const [Description, setDescription] = UseState (""); const [fonctionnalités, setFeatures] = useState (["", "", ""]); const [cibleUser, setCargeTuser] = useState (""); const [objectif, setgoal] = useState (""); const [ton, settone] = useState (""); const [style, setStyle] = UseState (""); const [ReferenceUrl, setReferenceUrl] = UseState (""); const [chargement, setLoading] = useState (false); const [result, setResult] = UseState (""); // LP Generation Process // Fonction pour appeler l'API et générer la page de destination html const generatelp = async () => {setloading (true); setResult (""); essayez {const res = attend fetch ("/ api / generate-lp", {méthode: "post", en-têtes: {"contenu-type": "application / json"}, body: json.stringify ({productName, catégorie, description, fonctionnalités, cibleUser, but, ton, style, référence,}),}); const data = attendre res.json (); setResult (data.html || "n'a pas réussi à générer HTML."); } catch (err) {setResult ("Une erreur s'est produite."); } enfin {setLoading (false); }}; // Téléchargez le HTML généré en tant que fichier const downloadhtml = () => {const blob = new Blob ([result], {type: "text / html"}); const url = url.createObjectUrl (blob); const a = document.CreateElement ("a"); a.href = url; A.Download = "landing_page.html"; a.click (); Url.RevokeObjectUrl (URL); }; // Aperçu dans une nouvelle fenêtre // prévisualisez le HTML généré dans une nouvelle fenêtre de navigateur const openpreview = () => {const aperview = window.open ("", "_blank"); if (aperview) {préview.Document.Write (result); préview.Document.close (); }}; retour ( <main className="min-h-screen bg-gray-900 text-white p-6"><div className="max-w-3xl mx-auto space-y-8"><h1 className="text-3xl font-bold text-center"> Générateur LP</h1> {/ * Forms Entrées - Field de saisie * /} <Input label="Product Name" value={productName} onChange={setProductName} /><Select label="Category" value={category} onChange={setCategory} options={[ { value: "web", label: "Web Service" }, { value: "cafe", label: "Cafe / Restaurant" }, { value: "app", label: "Application" }, { value: "lesson", label: "Online Course" }, { value: "other", label: "Other" }, ]} /><Textarea label="Short Description" value={description} onChange={setDescription} /> <div> <label classname = "Block Text-Sm MB-1"> Cléties de clés (jusqu'à 3) </Babe> {fonctionnalités.map ((f, i) => (<entrée Key = {i} value = {f} onchange = {(e) => {const newFeatures = [... fonctionnalités]; newfeatures) placeholder = {`Feature $ {i + 1}`} classname = "w-asfull MB-2 p-2 bg-gray-gray-800 bordure bordure-gray-600" />))} </ div> <entrée label = "cible public" value = {cibleUser} onChange = {setCargeUser} /> <entrée label = "Appel to Action" Value = {but}} onChange = {setGoal} /> <input label = "Tone of Voice" value = {Tone} onChange = {settone} /> <input label = "Visual Style" value = {style} onChange = {setStyle} /> <Input Label = "Reference lp url (facultatif)" Value = {référence} onChange = {setReUrl} * /} <div classname = "Text-Center"> <Button onClick = {Generatelp} Disabled = {Loading} className = "PX-6 PY-3 BG-GREEN-500 RORDED HOVER: BG-GREEN-600 Text-Black Font-Semibold Disabled: Opacity-50"> {Loading? "Génération ...": "Générer LP"} </ Button> </ Div> {/ * Result & Actions * /} {Result && (<div classname = "Space-y-4"> {/ * Afficher le résultat (texte brut) * /} <div classname = "Whitespace-Pre-wrap MAX-H- [400Px] Overflow-Y-Auto Text-SM "> {Result} </ Div> {/ * Aperçu Download * /} <div classname =" Flex GAP-4 Justify-Center "> <Button onClick = {OpenPreview} className =" PX-4 PY-2 BG-BLUE-500 HOVER: BG-BLUE-600 TEXT-White Rounded " onClick = {downloadhtml} classname = "px-4 py-2 bg-puple-500 hover: bg-puple-600 text-white arrond"> télécharger html </utton> </div> </div>)} </div> </-main>); } // Entrée du composant de formulaire de formulaire d'entrée commune ({label, valeur, onChange,}: {label: string; value: string; onchange: (v: string) => void;}) {return (<v> <label classname = "Block text-sm mb-1"> {label} </ label> <entrée value =} onchange = {(e) => onChange (e.target.value)} classname = "w-ull p-2 bg-gray-gray-800 bordure bordure-gray-600" /> </div>); } // Common SELECT BOX // Réutilisable SELECT Fonction du composant SELECT ({Label, Value, OnChange, Options,}: {Label: String; Value: String; OnChange: (V: String) => void; Options: {Value: String; Label: String} [];}) {return (<div> <label className = "Block Text-SM MB-"> {Label} onchange = {(e) => onchange (e.target.value)} classname = "w-ull p-2 bg-gray-800 bordure bordure-gray-600"> {options.map ((opt) => (<option key = {opt.value} value = {opt.value}> {opt.Label} </lect> </div>); } // Common TextArea // Fonction de composante TextArea réutilisable TextArea ({label, valeur, onChange,}: {label: string; valeur: string; onChange: (v: string) => void;}) {return (<div> <label className = "Block Text-SM MB-1"> {étiquette} </ labor onChange (e.target.value)} Rows = {3} classname = "W-Full P-2 BG-GRAY-GRAY-800 Border-Border-Gray-600" /> </div>); }

Contrôlant l'état du formulaire d'entrée

const [ProductName, setProductName] = UseState (""); const [catégorie, setCategory] = UseState (""); const [Description, setDescription] = UseState (""); const [fonctionnalités, setFeatures] = useState (["", "", ""]); const [cibleUser, setCargeTuser] = useState (""); const [objectif, setgoal] = useState (""); const [ton, settone] = useState (""); const [style, setStyle] = UseState (""); const [ReferenceUrl, setReferenceUrl] = UseState (""); const [chargement, setLoading] = useState (false); const [result, setResult] = UseState ("");

Brève description:

ProductName : Nom du produit
Catégorie : Genre (Web, cafés, applications, etc.)
Description : Description du produit (texte court)
Caractéristiques : un tableau pour entrer jusqu'à trois fonctionnalités
TargetUser : utilisateurs cibles (par exemple, propriétaires individuels)
Objectif : Objectif de LP (par exemple l'achat, enregistrement)
Ton : Tonmana (convivialité, formel, etc.)
Style : l'atmosphère du design (mignon, cool, etc.)
référence : URL de référence LP
Chargement : que vous attendiez ou non la réponse API
Résultat : chaîne HTML générée

Traitement de génération LP et appels API

const generatelp = async () => {setloading (true); setResult (""); essayez {const res = attend fetch ("/ api / generate-lp", {méthode: "post", en-têtes: {"contenu-type": "application / json"}, body: json.stringify ({productName, catégorie, description, fonctionnalités, cibleUser, but, ton, style, référence,}),}); const data = attendre res.json (); setResult (data.html || "n'a pas réussi à générer HTML."); } catch (err) {setResult ("Une erreur s'est produite."); } enfin {setLoading (false); }};

Brève description:

Envoyez les données d'entrée / api / générer-lp
En cas de succès, le HTML sera stocké dans le résultat

Processus d'affichage de prévisualisation

const OpenPreview = () => {const aperview = window.open ("", "_blank"); if (aperview) {préview.Document.Write (result); préview.Document.close (); }};

Brève description:

Affichez le HTML généré dans un nouvel onglet et prévisualisez le LP réel

Traitement de téléchargement HTML

const downloadhtml = () => {const blob = new Blob ([result], {type: "text / html"}); const url = url.createObjectUrl (blob); const a = document.CreateElement ("a"); a.href = url; A.Download = "landing_page.html"; a.click (); Url.RevokeObjectUrl (URL); };

Brève description:

Utilisez un blob HTML et permettez

Résultats de sortie + bouton de téléchargement de prévisualisation

{résultat && ( <div className="space-y-4"><div className="whitespace-pre-wrap bg-gray-800 border border-gray-600 p-4 rounded max-h-[400px] overflow-y-auto text-sm"> {résultat}</div><div className="flex gap-4 justify-center"> <button onClick={openPreview} className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded" >Aperçu</button> <button onClick={downloadHTML} className="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded" >télécharger html</button></div></div> )}

Brève description:

Le HTML du LP généré s'affiche directement à l'écran.
Vous pouvez le visualiser dans le navigateur en utilisant "Aperçu" et enregistrer des fichiers à l'aide de "Download"

Implémentation côté serveur (Intégration API OpenAI)

L'interaction de génération LP l'envoi d'une demande du client vers
/ API / Generate-LP puis renvoyant un relais et une réponse à l'API de chat d'Openai sur le serveur.

La quantité totale de code source côté serveur est la suivante:

import {nexTeQuest, nexTResponse} depuis "next / server"; // API Endpoint (Post) // génère automatiquement une page de destination au format HTML // POST POINT Point pour générer la page de destination HTML basée sur la fonction d'exportation de l'utilisateur Async Fonction post (req: NextRequest) {try {// Extracter le corps JSON de Client // Extract Payload à partir de la demande de la demande, de la catégorie, des description, des fonctionnalités, des fonctionnalités cibles req.json (); // Valider les champs requis if (! ProductName ||! Description ||! Objectif) {return nexTResponse.json ({erreur: "Fields requis manquants: ProductName, Description ou objectif.",}, {Status: 400}); } // Construire l'invite à envoyer à l'invite de API OpenAI CONS = `Vous êtes un rédacteur professionnel et un développeur HTML. Votre tâche consiste à générer une page de destination HTML complète et complète pour le produit suivant. Structurez-le sur la base de trois sections principales: première vue, corps et fermeture. Instructions: - Sortir un document HTML complet et valide (inclure)<!DOCTYPE html> ,<html> ,<head> , et<body> ). - anglais uniquement. - Ne formatez pas le résultat en utilisant Markdown. - N'ajoutez aucune explication avant ou après le code. - Utilisez uniquement HTML brut comme sortie. - N'incluez pas les cadres CSS JavaScript ou externes. - Utilisez des styles en ligne ou internes<style> for layout and design. - Use a clear, persuasive tone for copywriting. - Use semantic HTML elements (header, section, footer, etc.). Sections to include: 1. First View - Headline (h1) with the product name - Subheadline with a short summary - Prominent CTA button (e.g. "Start Now") 2. Body - Detailed product description - Bullet point list of key features - Optional paragraph about who it’s for 3. Closing - Final persuasive message - CTA button (again) - Optional tagline (e.g. “No credit card required”) Product Info: - Product Name: ${productName} - Category: ${category} - Description: ${description} - Key Features: ${features.filter(Boolean).join(" / ") || "None"} - Target Audience: ${targetUser || "Not specified"} - Goal or Call-to-Action: ${goal} - Tone of Voice: ${tone || "Neutral"} - Visual Style: ${style || "Clean"} - Reference URL: ${referenceUrl || "None"} Respond only with the HTML. Do not include markdown code blocks or explanations.`; // OpenAI APIを呼び出す // Call OpenAI Chat API const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: process.env.OPENAI_MODEL || "gpt-4o", messages: [ { role: "system", content: "You are a helpful assistant and skilled HTML designer.", }, { role: "user", content: prompt, }, ], temperature: 0.8, }), }); const data = await response.json(); // エラーハンドリング（OpenAIの応答に問題がある場合） // Handle OpenAI error response if (data.error) { console.error("OpenAI API Error:", data.error); return NextResponse.json( { error: "Failed to generate landing page." }, { status: 500 } ); } // HTML出力を取得 // Extract the generated HTML content const html = data.choices?.[0]?.message?.content || ""; // クライアントへHTMLを返却 // Return HTML back to client return NextResponse.json({ html }); } catch (err) { // サーバー側の予期せぬエラー対応 // Catch any server-side error console.error("Server Error:", err); return NextResponse.json( { error: "Internal server error." }, { status: 500 } ); } }

Configuration de base (demandes de réception à l'aide de la méthode post-post)

import {nexTeQuest, nexTResponse} depuis "next / server"; Exporter la fonction asynchrone Post (req: nexTeQuest) {const {ProductName, catégorie, description, fonctionnalités, cibleUser, objectif, ton, style, référence,} = attendre req.json ();

Brève description:

Définit les points de terminaison API limitées aux post-post
Reçoit les paramètres (nom du produit, description, objectif, etc.) envoyé du côté client ( JSON

Vérifiez les champs requis

  if (! ProductName ||! Description ||! but) {return nexTResponse.json ({error: "manquer les champs requis: productName, description ou objectif."}, {status: 400}); }

Brève description:

Si le nom, la description ou l'objectif du produit n'est pas entré, une erreur de 400 sera retournée et le traitement sera suspendu.
Sécurité en passant par la validation à l'avant

Génération rapide (instructions données à Chatgpt)

const Prompt = `Vous êtes un rédacteur professionnel et un développeur HTML. Votre tâche consiste à générer une page de destination HTML complète et complète pour le produit suivant. Structurez-le sur la base de trois sections principales: première vue, corps et fermeture. Instructions: - Sortir un document HTML complet et valide (inclure<!DOCTYPE html> ,<html> ,<head> , et<body> ). - anglais uniquement. - Ne formatez pas le résultat en utilisant Markdown. - N'ajoutez aucune explication avant ou après le code. - Utilisez uniquement HTML brut comme sortie. - N'incluez pas les cadres CSS JavaScript ou externes. - Utilisez des styles en ligne ou internes<style> for layout and design. - Use a clear, persuasive tone for copywriting. - Use semantic HTML elements (header, section, footer, etc.). Sections to include: 1. First View - Headline (h1) with the product name - Subheadline with a short summary - Prominent CTA button (e.g. "Start Now") 2. Body - Detailed product description - Bullet point list of key features - Optional paragraph about who it’s for 3. Closing - Final persuasive message - CTA button (again) - Optional tagline (e.g. “No credit card required”) Product Info: - Product Name: ${productName} - Category: ${category} - Description: ${description} - Key Features: ${features.filter(Boolean).join(" / ") || "None"} - Target Audience: ${targetUser || "Not specified"} - Goal or Call-to-Action: ${goal} - Tone of Voice: ${tone || "Neutral"} - Visual Style: ${style || "Clean"} - Reference URL: ${referenceUrl || "None"} Respond only with the HTML. Do not include markdown code blocks or explanations.`;

Brève description:

Génère dynamiquement une instruction (invite) à envoyer à Chatgpt
intégrant les informations du produit et en spécifiant le format de configuration et de sortie en détail , vous pouvez générer un HTML de haute qualité.
Envoyez une meilleure invite et vous pouvez générer un meilleur HTML, alors essayez de le personnaliser.

Envoyez une demande à l'API OpenAI

const Response = Await Fetch ("https://api.openai.com/v1/chat/completions", {méthode: "Post", en-têtes: {autorisation: `Bearer $ {process.env.openai_api_key}`, "Content-Type": "application / json",}, body: json.stringify ({model: process.env.openai_model || "gpt-4.1-min", messages: [{Role: "System", contenu: process.env.system_prompt || "Vous êtes un assistant utile." const data = attendre réponse.json ();

Brève description:

Envoyer une demande HTTP Post à l'API OpenAI (CHAT ACHELIONS)
Le modèle , API_KEY , SYSTEM_PROMPT etc. sont chargés à partir de .env
Le tableau des messages a un rôle système (personnalité) et un rôle utilisateur (instruction)

Vérifiez et renvoyez les erreurs de réponse ou de gestion

  if (data.error) {Console.Error ("Erreur de l'API OpenAI:", data.error); return nexTResponse.json ({error: "n'a pas réussi à générer la page de destination."}, {status: 500}); } const html = data.choices ?. [0] ?. Message? .Content || ""; return nexTResponse.json ({html}); }

Brève description:

Si la réponse Chatgpt est → Sortie du journal + 500 Renvoie l'erreur
Si la réponse est normale, le HTML sera renvoyé au client à l'aide de JSON stocké dans la touche HTML

[Bonus] choses à noter

Assurez-vous de gérer
avec .Env afin qu'ils ne soient jamais exposés Si votre touche API est divulguée, supprimez la touche API du tableau de bord OpenAI.

Le nom du modèle est une variable d'environnement, veuillez donc le remplacer en fonction de l'objectif.
Le montant d'argent impliqué varie en fonction du modèle, alors soyez prudent lors de la sélection d'un modèle.

Les invites peuvent modifier le contenu généré, alors assurez-vous de personnaliser votre invite.

Chèque d'opération

Une fois que vous avez fait cela, vérifions l'opération!

Vous verrez l'écran ci-dessous, alors essayez d'ajouter les informations au formulaire d'entrée et de les générer!

Ce LP a été généré! ! Eh bien, je l'ai généré avec GPT-4O, mais je suppose que c'est un compromis.

Quand je l'ai généré avec GPT-4.1-Mini, il a été généré comme ça!
Je pense qu'en rendant l'invite un peu mieux ou en répondant plusieurs fois, nous pouvons réaliser quelque chose d'un peu plus de qualité. (C'était ma limite ...)

Informations sur les ventes de modèles

L'application automatique de génération LP introduite dans cet article est vendue comme un modèle qui peut également être utilisé à des fins commerciales.

Pourquoi vendre des modèles?

Nous avons préparé cela à ceux qui subissent les besoins suivants:

"Même si vous suivez les étapes, l'environnement ne fonctionne pas ..."
"Je veux juste commencer par un échantillon en mouvement."
"J'ai regardé mon blog et je l'ai trouvé utile, donc je voudrais l'acheter dans le but de soutenir et de faire un don."

Même ceux qui n'ont pas l'habitude de développer le jeu peuvent démarrer et l'essayer rapidement avec un minimum d'effort

Exemples d'utilisation du modèle (idées de personnalisation)

Ce modèle est parfait à des fins de développement personnel et d'apprentissage.
Par exemple, nous vous recommandons de modifier et d'étendre ce qui suit:

Permet d'insérer des images et des logos dans le LP généré
Ajouter un support LP multilingue (commutation japonaise et anglais, etc.)
Enregistrer et gérer les résultats générés (supprimer l'historique des LP passés)
Créer une fonctionnalité qui peut être hébergée en tant que
Ajouter une interface utilisateur pour choisir des invites et des modèles de conception

C'est également une bonne pratique de l'essayer sur une base de "série" pour la programmation des débutants.

Ce qui est inclus dans le modèle

contient
tout le code source du projet que nous avons introduit ici Par conséquent, vous n'avez pas à créer ou à configurer votre propre projet à partir de zéro, et vous pouvez le démarrer immédiatement .

Formulaire d'entrée LP et UI Aperçu avec next.js (routeur de l'application)
Implémentation côté serveur avec intégration API OpenAI
Code source facile à lire avec des commentaires
Style simple et facile à améliorer avec le vent arrière CSS
Fichiers de configuration de démarrage Docker (dockerfile, docker-compose.yml)

* Pour exécuter, un environnement d'exécution de base tel que node.js et docker est requis.

Les modèles introduits dans cet article sont maintenant en vente!

Acheter sur gumroad acheter sur note

Vous pouvez également consulter d'autres modèles à partir de chaque page:

Note de gumroad

résumé

Cette fois, nous avons introduit comment construire
une application simple de génération automatique de page de destination (LP) à l'aide de l'API OpenAI et Next.js.

En regardant les points:

L'API CHAT EXPLATIONS vous permet de générer du HTML de haute qualité avec seulement quelques invites
NEXT.JS App Router + Tailwind CSS le rend simple et facile à personnaliser
L'utilisation de modèles vous permet de commencer à partir d'un état où vous pouvez l'essayer rapidement, en éliminant les tracas de la construction d'un environnement.

Ce modèle
est particulièrement recommandé pour qui souhaitent prototyper rapidement les LPS introduisant des produits ou
souhaitent vivre l'automatisation LP

Essayez de l'utiliser comme base pour ajuster les invites et les conceptions
pour évoluer vers votre propre générateur LP Non seulement il est recommandé comme base pour ajouter des fonctionnalités uniques et personnaliser l'interface utilisateur.

Les modèles introduits dans cet article sont maintenant en vente!

Acheter sur gumroad acheter sur note

Vous pouvez également consulter d'autres modèles à partir de chaque page:

Note de gumroad

Partagez si vous le souhaitez!

L'URL a été copiée!

J'ai créé une application de génération d'images en utilisant Next.js et Openai API-DALL · E 3 (Tailwind CSS compatible)

Qui a écrit cet article

Taku

Ceci est un blog que j'ai commencé à étudier la sécurité de l'information. En tant que nouvel employé, je serais heureux si vous pouviez regarder avec un cœur large.
Il y a aussi Teech Lab, qui est l'occasion d'étudier le plaisir en programmation, donc si vous êtes intéressé par le développement de logiciels, assurez-vous de jeter un œil!