Epic Next.js 14 Tutorial Part 2: Building Out The Home Page

1

This post is part 2 of many in our Epic Next.js Series. You can find the outline for upcoming posts here.

This is a companion discussion topic for the original entry at https://strapi.io/blog/epic-next-js-14-tutorial-part-2-building-out-the-home-page
2

Why not using populate deep plugin and axios? Thanks in advance for reply :smiling_face:

4

The populate deep plugin will query all the data, not just the data I specify, which will impact performance of the app. We currently don’t recommend the use of the populate deep plugin and have removed in from the Strapi Marketplace.

5

what a great tutorial, Paul. Epic is right! I just finished part 2 and I’m starting to see a new way of thinking/doing.

I was just “in the market” for a UI library and stumbled upon

Thanks for recording all of your steps.

1 Like
6

Thank you for the awesome kind words. Really means a lot to me.:slightly_smiling_face:

7

Hay Paul,I love the flatten attributes function! my question: with strapi 5 coming out is refactoring my next app to use this shared flatten attributes function a good first step, or will Strapi 5 do something with its new api format that means this flatten attributes function will not be required in the future?

1 Like
9

These posts are just what I was looking for! Thank you for your easy explanation.

I may be mistaken, but I think label props in Link type on line 10 is text. (repo is correct though :+1:
The code below the sentence “Let’s create the following interfaces. ”

// incorrect
interface Link {
  id: number;
  url: string;
  label: string;
}

// correct
interface Link {
  id: number;
  url: string;
  text: string;
}
1 Like
10

Thanks will have to update in post.

In terms of flatten attribute function.

Thanks. This is a good approach for v4 projects and will make upgrading to v5 much easier.

With v5, we will already have the flattened response, which will require us to make some minimal changes in the front end.

We would need to remove the flatten attributes function and make some minor updates on our front end, if any.

Which will be nice. I will make a post about the migration process when v5 is out.

As for something I have been doing in my personal projects, I am not sure if it is good advice, but I have been playing with the idea of having an intermediate data connecter function, which takes an API response and converts it to what the front end expects.

So when I have a new API response structure, I don’t have to update all of my frontends, just the intermediary function.

I am sure this approach has some issues that I did not find yet.

I just wanted to add some context for why I added the flattened attribute function in the first place.

1 Like