Next.js App Router

/

Learn how to build a SaaS with Next.js App Router and Supabase

1Introduction to Next.js and the App Router 2Understanding the Next.js App Router 3Creating a Next.js project 4Authentication 5Building the Database schema 6Generating Blog Posts with ChatGPT 7CRUD: Displaying, updating and deleting Posts 8Stripe Payments 9Permissions and Quotas 10Going to Production

Generating Blog Posts with ChatGPT

In this lesson, we learn how to generate posts with OpenAI and to display them using a table

Reading Time: 42 minutes

In the previous section, we learned how to set up a schema with Supabase, and added two tables: users and posts.

In this section, we will learn how to generate blog posts with OpenAI's ChatGPT and insert them into the posts table.

To do so, we will:

Create a form to collect user input for the blog post - i.e. such as the topic
Use OpenAI's ChatGPT API to generate the blog post content and stream text from the API in real-time.
Finally, insert the posts into the posts table once generated by ChatGPT.

In the next sections, we will learn how to display the data from the posts table on the front end.

Installing the OpenAI SDKs

Open AI SDK: We ...

Installing the OpenAI SDKs

Creating the OpenAI Client

Updating the Dashboard page to redirect to the form

Streaming Text with the ChatGPT API

Creating a Route API for streaming text from the ChatGPT API

Creating the Form

Adding the form to the New Post page

Using Server Actions to request the ChatGPT API

Create the posts Server Actions

Adding the action to the form

Inserting the generated posts into the database

Creating a Mutation with Supabase

We will get back to this section later

Conclusion

What's Next