Async server Component in Next JS
Unanswered
mushkovskiy posted this in #help-forum
Hi all! I started learning Next JS and a couple of questions appeared, I would be very grateful if you answer
1. You can import google fonts out of the box, there is such an import
everything is clear here, this is the font configuration
but what does next className in body tag mean?
I mean how can a font have a className
2. Server components can be asynchronous, but as you know, asynchronous functions return a promise, why does the server component return valid html and not a promise, and, accordingly, there is no error?
1. You can import google fonts out of the box, there is such an import
const inter = Inter({ subsets: ['latin'] });everything is clear here, this is the font configuration
but what does next className in body tag mean?
I mean how can a font have a className
<body className={inter.className}></body>2. Server components can be asynchronous, but as you know, asynchronous functions return a promise, why does the server component return valid html and not a promise, and, accordingly, there is no error?
const Blog = async () => {
const posts = await fetchData();
return (
<>
<h1>Blog page</h1>
<ul>
{posts.map((post: any) => {
return (
<li key={post.id}>
<Link href={`/blog/${post.id}`}>{post.title}</Link>
</li>
);
})}
</ul>
</>
);
};
export default Blog;3 Replies
Atlantic salmon
1. Fonts need to be defined in CSS, check out Inspect Element in your favoritw Browser to find out what that looks like.
2. async server components do return promises but react and the nextjs router know how to handle that so there are no errors