Top Blog
EtsySuccess
Information

Creating a learning platform with Next.js 13 app router

.

1K

shares

A content model is nothing until it has content and a frontend. In the last part of this series, we explored a basic schema and content model for a learning platform with Hygraph. In this article, we’ll take that schema and produce a Next.js site using data from Hygraph.

Series:

Requirements

This project uses Next.js 13 and the new App router. This will give us the most flexibility to extend the project in future installments using React Server Components to handle authentication and interactivity. A basic understanding of React and Next.js will help you through this article. If you didn't follow through the content model article, you can clone the Hygraph project here to get started with this article.

Project setup

To start, we need to initialize a new Next.js 13 project. Open up your terminal and navigate to where you want your project, then run the following command:

npx create-next-app learning-platform

The interactive setup will ask you questions to configure your project. Initialize with the following answers:

  • Typescript: No
  • ESLint: Yes
  • Tailwind CSS: Yes
  • src/ directory: No
  • App Router: Yes
  • Import alias: No

Once the options are chosen, the CLI will install all the necessary pieces to run your Next.js site.

We’re not entirely done with our setup yet, however. We need to adjust the default Tailwind styling that Next.js gives us from the installation.

Update the global CSS rules in app/globals.css to remove the extra styling and leave the file with the following Tailwind imports:

@tailwind base;
@tailwind components;
@tailwind utilities;

That’s all the initial setup we need for the Next.js project, but let’s set up our Hygraph project as well. We’ll start with the learning platform schema created in the first article in this series. To make it accessible to our Next.js project,mustd to open permissions on the Content API.

To do this, navigate to your project’s settings and click on API Access. To start, let’s set the public content API to its default. This will give us access to all the content in our models to read into our project. From this same screen, grab the Content API endpoint URL.

Create a new file in the root of your project named .env.local and add the variable HYGRAPH_ENDPOINT. This will be where we add the endpoint we copied from Hygraph.

HYGRAPH_ENDPOINT=YOUR-URL-HERE

From here, we can run the site and implement the frontend.

npm run dev

Setting up the homepage with a list of courses

After the first article in this series, you should have a little content added to your Hygraph project. We’ll use that content to populate the homepage with a list of courses.

In Next.js 13’s App router structure, the homepage file is page.jsx directly in the app directory. The default file comes with a lot of Next.js promotional material; let’s eliminate all that and add a structure for displaying the courses.

Read the full post here.

Tamás Hám-Szabó

Founder of SAAS First - the Best AI and Data-Driven Customer Engagement Tool

With 11 years in SaaS, I've built MillionVerifier and SAAS First. Passionate about SaaS, data, and AI. Let's connect if you share the same drive for success!

Share with your community!

In this article

Introduction Unraveling the Power of XRay

Unraveling the Power of XRay

Revenue Optimization Stragies

Staying Ahead of the Curve

Real Success Stories

Conclusion

Related Articles

"x-Ray Commerce optimizes my Etsy stores in mere seconds. No more guessing and forever testing to optimize my listings. Along with amazing customer service, this app is a must have for all Etsy shop owners."

Bunny H.
Shop Owner, CuriousOrangeCat

“The x-Ray Chrome extension is what initially drew me in. I could easily see how my listings were performing compared to my competitors, and it made even more sense to use the web app so that I could optimize my product photos and descriptions. It was too easy!”

Nayla
Shop Owner, ByNaylaArts

“I have tried using other tools and platforms, but x-Ray was user-friendly and fast! I have several listings, and I needed a quicker way to enhance all my photos. I really loved that I could also update my listings in one click.”

Shami
Shop Owner, UrbanLunaMoon

Lets Get in Touch

Join hundreds of sellers who are optimizing their sales and maximizing growth effortlessly.

Contact Us

Part of an enterprise or brand?

Contact Us