[Request New Content] Typescript: A Beginners Guide to Build an application with Strapi and Next.js using TypeScript

[dessireugarte]

My Request

If you are interested, please share an outline of what the article would look like.

Community vote
👍 Upvote if you like this topic
🚀 If you can make the article/video!

Thank you.

[zelief]

Hi @dessireugarte, since I am also writing a similar article using Typescript & NextJS in #922, I am interested in writing this too, can I work on this?

My Idea is to create a simple blog website with a list page and an article page

This is the outline:

• Introduction
• Installing Strapi
• Create Article Content Type (Title, Image, Summary, Content, Tags)
• Input some data
• Fetch data via the Rest API
• Creating a NextJS app with Typescript
• Create Article Type in Typescript based on the JSON returned
• Creating the Index Page in NextJS with list data from Strapi
• Creating an article Page in NextJS with content data from Strapi
• Conclusion

[dessireugarte]

Hello @zelief 👋
Thanks for sharing the outline. Looks good to me, I'd just add deployment as well.
What are your thoughts @PaulBratslavsky?

[zelief]

Hi @dessireugarte,
Is there any best practice on how to get the types from Strapi models to be used in front-end typescripts?

So far, I didn't come for any solution except to write the types manually or generate them using t4s package.

In my experience, using ts:generate-types is not helping since we need to use the types in Next.js repository.

And if we don't have a better solution, can I include using the t4s package in the tutorial?

[Convly]

Hey @zelief, there are no best practices/conventions at the moment when it comes to getting types for the front end.

However, we're slowly building and adding new tools and utils to build powerful types based on the output of the ts:generate-types command.

For instance, I'm working on adding strongly typed support for both the entity service and the content API.

As for your particular case, I think you could beneficiate from smth I wrote here. Those types (Response, ResponseCollection) use the schemas generated from the ts:generate-types command to return data/(id|attribute) structures with support for scalars, relations, dynamic zones, and components. It's still experimental atm, but I'm expecting to add this to our toolbox in our repositories quite soon.
In your scenario, you could just drop the generated schema.d.ts file somewhere so that it's accessible from your frontend application, and then use this gist to get Response types

Let me know if you think it could be useful. Happy to give you more examples if needed.

[Convly]

And if we don't have a better solution, can I include using the t4s package in the tutorial?

TBH, If you don't see another alternative I don't see why you shouldn't 🤷‍♂️
We're still early in the process of providing accurate typings for the community, so using whatever works well at the moment would make sense IMO.

[TechMakanaki]

@dessireugarte I will like to work on this topic since I have written a related article to this before for the company.
Kindly reply so I can submit my outlines.

[dessireugarte]

Hello @TechMakanaki! Could you please submit an outline for this topic?

[TechMakanaki]

@dessireugarte thank you I will provide/submit an outline that I will work on soon.

[TechMakanaki]

The outline I came up with:

• Introduction
• Prerequisite
• Installing strapi(typescript)
• Creating collections types
• Installing Next.js(typescript)
• Creating a simple blog
• Conclusion

[TechMakanaki]

Hi @dessireugarte should I go on with th draft.
Kindly reply as I await your comment.

[dessireugarte]

Hello @PaulBratslavsky
What do you think about this outline?

[TechMakanaki]

@dessireugarte Should I continue now?

[PaulBratslavsky]

@dessireugarte and @TechMakanaki after reviewing the submission. At this point in time, we are not looking for articles that cover basic "getting started with Strapi topics" and focusing more on the front end, since we already have plenty of articles similar to this one up already.

You can check out this issue #1155 for some topic ideas. At the moment we are looking for topics that cover Strapi backend customizations and extensions.