Creating a GPT Guide for Next.js App Router course

As a UX designer with a background in web design, I’ve seen the field evolve dramatically. In the early days, web design meant balancing art direction with frontend coding. Over time, I specialized in UX, qualitative and quantitative research, lean methods, and growth hacking. Meanwhile, frontend development became increasingly JavaScript-focused, with many tasks traditionally handled by the backend moving to the frontend. For many years, the only coding expertise I’ve kept up with has been CSS.

But the AI revolution has changed everything. Now, I feel like I have superpowers, enabling me to be a full-stack developer, even more so than in the early days of the web. However, while working on some projects using Next.js, I noticed that many instructions were outdated. This led me to create a custom GPT to assist with my nextjs projects, ensuring I have the most up-to-date guidance.

Next.js App Router course

There is an excellent Learn Next.js App Router course on Next.js official site, which covers building a full-stack dashboard-application with a public home page, login page, protected dashboard pages, and invoice management. I've followed it and want to do very similar things in a project I'm working on. So I decided to create a Custom GPT based on that course.

Why Use Knowledge from Files in GPTs?

Integrating knowledge from files into GPTs is a Retrieval-Augmented Generation (RAG) tactic. This approach enhances the capabilities of the GPT by providing it with direct access to specific, structured information from documents. For this project, adding a PDF version of the Next.js course allows the GPT to reference the exact content from the course. This ensures more accurate responses, detailed explanations, and precise code examples. By leveraging knowledge from files, the GPT can deliver a richer and more contextually relevant learning experience.

Challenges with Downloading the Course

The course is a client-side rendered application, making traditional tools like wget ineffective for capturing the JavaScript-rendered content. ChatGPT suggested using Puppeteer, a headless browser, to handle the JavaScript and capture the course content. The process involved:

• Setting Up Puppeteer: Used Puppeteer to control a headless browser.
• Capturing Content: Wrote scripts to navigate through each page, wait for JavaScript to render, and capture the HTML.
• Creating PDFs: Converted each captured page into a PDF.
• Combining PDFs: Merged the PDFs into a single document using pdftk.

I had to list all subpages I wanted to download, but I could just feed the HTML for the course "menu" into ChatGPT and ask for an array.

    // Subpages array
    const subpages = [
        '/getting-started',
        '/streaming',
        '/css-styling',
        '/partial-prerendering',
        '/optimizing-fonts-images',
        ...
        '/adding-metadata'
    ];

The resulting combined PDF of the Next.js Dashboard App course as PDF.

Building the GPT

With the course content compiled into a PDF and a Next.js 14 documentation PDF, I integrated these resources into the GPT. This ensures the GPT provides detailed explanations, TypeScript code examples, and up-to-date information.

Features of the Next.js App Router Teacher GPT

• Interactive Learning: Provides detailed explanations and TypeScript code examples.
• Real-time Q&A: Answers specific questions on Next.js topics.
• Comprehensive Guide: Covers setting up a Next.js project, creating routes, implementing authentication, and managing a PostgreSQL database with @vercel/postgres.
• Up-to-date Information: Incorporates the latest Next.js 14 features.

And because Open AI just released GPT-4o it's super fast.

By the way, just like when I'm developing, most of the characters in this post have just been copy/pasted from ChatGPT.