Ant Design is both a popular and powerful component framework.
If you browse through their library you'll see a ton of options including some that you won't often see provided like column transfers and color pickers.
Like Mantine, Ant Design is a full component framework. You'll be composing everything with components. Ant Design also has its own forms system that comes with some strong TypeScript support.
One downside is that their Typography components currently can only be used in client components. But, that may change in the future!
Transcript
Entity is another incredibly popular front-end framework and it works really well in the Next.js App Writer. There is a fantastic set of components. You can see it's got a nice traversable list here that we can go through. I mean it's got some really standout ones like for example steps can be very very handy. It's got switches.
It's got a transfer component that allows you to go and move things from one column to another. You don't usually see that much anymore, but it's very cool. A selectable tree. This is a fantastic framework. Very, very powerful.
It's also got a nice set of instructions for use with the App Writer, which is always nice to see. Let's go try it out. I'm going to go build our anti-test. Anti is not built on top of Tailwind, so we're going to say no to that. Otherwise, we're going to say yes to the App Writer, and that's it.
All right, let's bring in anti-test. All right, we're good to go. According to the instructions over here, the next thing we want to do is bring in the Next.js registry, so let's do that. All right, with that done, we're going to go into our layout and we're going to use that anti-registry and add it around our children. Now another thing we need to do is create our own provider.
So let's create that, AntD provider. Now this is going to be a client component that brings in the config provider and the theme. So the config provider is what's going to provide the theme down to each one of the AntD components. It apparently is not marked out of the box of the client, which means that we have to do the work ourselves. Not a big deal, but you know, there you go.
We are going to specify that we want a dark algorithm. That's going to give us the dark mode. Now let's go back into our layout and use the provider that we just created. So put that inside of our Antti registry. Alright, Antti is set up.
Let's go bring in our blog infrastructure. That includes our blog file that has our server actions to maintain our blog as well as our types to define a blog entry type. Now let's go and render our blog entries. To do that we're going to create another component called blog. Now we'll bring into there typography from AntD and then we'll split that out into title and paragraph.
Again, these are component frameworks, so it's going to use components to do things like say, I want a title, I want a paragraph, a certain type of typography, it's all maintained by the framework. Other than that, we're just gonna go and render out those entries as titles and paragraphs. Let's give that a try. To do that, we're gonna go back in our page and replace the boilerplate with an import of flex from Antti. That's gonna give us our flex box, give us our two column layout.
Within that, we're gonna use some divs that we're gonna specify with the width. Other than that we're going to do our usual getting of the blog entries and then sending it off to our component. Let's try it out. Head back to localhost 3000 and see. Okay, so now we're seeing up, can't react client manifest.
This is a good indication that this needs the use client directive in here and that we can't use typography without being a client component. Hit save. And now we're not getting error, but we're not getting a black background. So let's go and add into our globals, just setting the background of black and giving ourselves a little body margin. We'll bring in our globals.
And yeah, okay, there we go. That looks good and it's got a dark theme. I'm not sure why I had to do that. Okay, but so far, so reasonably good. I would say that the using the client for typography isn't great, but the Flexbox being okay with being an RSC, which we saw over here in our page, we're in flex and that was not a problem.
That's good, so that's nice. I mean, if you think about it, you're probably gonna be doing data fetching and layout in your RSCs. That's probably okay. I mean, we are paying that hydration error for use client in our blog. So that's something to think about when it comes to Antti.
If someone from Antti is watching this, it would be nice not to have to do that in subsequent versions of Antti. All right, let's go build out our form. To do that, we create another file called blog form. Now Andy actually does have a forms management system in it and we're gonna use that. So it's got a form tag as well as a button and input tag and it's also got a type for form props.
Let's go take a look. So form has use form as a hook. We're gonna use that. It's not quite React Hook form but it seems to be fairly close. Now our onFinish gets a little bit more TypeScripty as we get to use form props with the form fields and the onFinish event to type out our onFinish function.
Other than that we're just going to use addEntry and resetFields instead of reset. Next up we're going to use our Form component to wrap the whole form and inside of that FormItems for each one of the FormItems. Interesting to see The generic syntax used here next to form item, you don't often see that. Pretty cool to see. It gives you some nice, strong typing for your elements, in this case, form item.
So I'm assuming if I do get rid of this, I can do, yeah, there you go. Now we get hinting, that's care of the generic. It's got some pretty simple validation rules around it, in this case required, and then we got our button wrapper inside of a form item. All right, looks pretty good. Let's try this out.
Go back over to our page and we'll bring in blog form, and then try it out. Oh, that's nice. I like the stars on the side there to indicate that those are required fields. Let's try it out. And there you go.
So sweet. As I say, Andy is a very well-respected enterprise level component library. It has a lot of different components to choose from. I do think there are some areas of improvement around, for example, typography, requiring client components. I don't think it should do that necessarily.
But as you can see, a really nice, well-styled UI. Glad to see that.
Entity is another incredibly popular front-end framework and it works really well in the Next.js App Writer. There is a fantastic set of components. You can see it's got a nice traversable list here that we can go through. I mean it's got some really standout ones like for example steps can be very very handy. It's got switches.
It's got a transfer component that allows you to go and move things from one column to another. You don't usually see that much anymore, but it's very cool. A selectable tree. This is a fantastic framework. Very, very powerful.
It's also got a nice set of instructions for use with the App Writer, which is always nice to see. Let's go try it out. I'm going to go build our anti-test. Anti is not built on top of Tailwind, so we're going to say no to that. Otherwise, we're going to say yes to the App Writer, and that's it.
All right, let's bring in anti-test. All right, we're good to go. According to the instructions over here, the next thing we want to do is bring in the Next.js registry, so let's do that. All right, with that done, we're going to go into our layout and we're going to use that anti-registry and add it around our children. Now another thing we need to do is create our own provider.
So let's create that, AntD provider. Now this is going to be a client component that brings in the config provider and the theme. So the config provider is what's going to provide the theme down to each one of the AntD components. It apparently is not marked out of the box of the client, which means that we have to do the work ourselves. Not a big deal, but you know, there you go.
We are going to specify that we want a dark algorithm. That's going to give us the dark mode. Now let's go back into our layout and use the provider that we just created. So put that inside of our Antti registry. Alright, Antti is set up.
Let's go bring in our blog infrastructure. That includes our blog file that has our server actions to maintain our blog as well as our types to define a blog entry type. Now let's go and render our blog entries. To do that we're going to create another component called blog. Now we'll bring into there typography from AntD and then we'll split that out into title and paragraph.
Again, these are component frameworks, so it's going to use components to do things like say, I want a title, I want a paragraph, a certain type of typography, it's all maintained by the framework. Other than that, we're just gonna go and render out those entries as titles and paragraphs. Let's give that a try. To do that, we're gonna go back in our page and replace the boilerplate with an import of flex from Antti. That's gonna give us our flex box, give us our two column layout.
Within that, we're gonna use some divs that we're gonna specify with the width. Other than that we're going to do our usual getting of the blog entries and then sending it off to our component. Let's try it out. Head back to localhost 3000 and see. Okay, so now we're seeing up, can't react client manifest.
This is a good indication that this needs the use client directive in here and that we can't use typography without being a client component. Hit save. And now we're not getting error, but we're not getting a black background. So let's go and add into our globals, just setting the background of black and giving ourselves a little body margin. We'll bring in our globals.
And yeah, okay, there we go. That looks good and it's got a dark theme. I'm not sure why I had to do that. Okay, but so far, so reasonably good. I would say that the using the client for typography isn't great, but the Flexbox being okay with being an RSC, which we saw over here in our page, we're in flex and that was not a problem.
That's good, so that's nice. I mean, if you think about it, you're probably gonna be doing data fetching and layout in your RSCs. That's probably okay. I mean, we are paying that hydration error for use client in our blog. So that's something to think about when it comes to Antti.
If someone from Antti is watching this, it would be nice not to have to do that in subsequent versions of Antti. All right, let's go build out our form. To do that, we create another file called blog form. Now Andy actually does have a forms management system in it and we're gonna use that. So it's got a form tag as well as a button and input tag and it's also got a type for form props.
Let's go take a look. So form has use form as a hook. We're gonna use that. It's not quite React Hook form but it seems to be fairly close. Now our onFinish gets a little bit more TypeScripty as we get to use form props with the form fields and the onFinish event to type out our onFinish function.
Other than that we're just going to use addEntry and resetFields instead of reset. Next up we're going to use our Form component to wrap the whole form and inside of that FormItems for each one of the FormItems. Interesting to see The generic syntax used here next to form item, you don't often see that. Pretty cool to see. It gives you some nice, strong typing for your elements, in this case, form item.
So I'm assuming if I do get rid of this, I can do, yeah, there you go. Now we get hinting, that's care of the generic. It's got some pretty simple validation rules around it, in this case required, and then we got our button wrapper inside of a form item. All right, looks pretty good. Let's try this out.
Go back over to our page and we'll bring in blog form, and then try it out. Oh, that's nice. I like the stars on the side there to indicate that those are required fields. Let's try it out. And there you go.
So sweet. As I say, Andy is a very well-respected enterprise level component library. It has a lot of different components to choose from. I do think there are some areas of improvement around, for example, typography, requiring client components. I don't think it should do that necessarily.
But as you can see, a really nice, well-styled UI. Glad to see that.
Jack Herrington