为每篇文章创建一个文件还是为每篇文章重复使用一个文件更好？

Question

I'm developing a website in Next.js and a section of this website is dedicated to articles. Each article has its page like for users profile. But, for users profile I have a [username].js file where I fetch specific data from the database for each user and display it in a common style.

For the articles I wanted to do the same thing, but the content of an article can have bold text, links, and other HTML tags and when I fetch data from the database and paste it in the file in this way <div>{article.content}</div> , the {article.content} in the browser becomes for exemple I am playng <b>soccer</b> in this club: <a href="https://blablabla.com">Juventus</a> , but the result that I want is "I am playing soccer in Juventus". How can I interpret HTML?

If I can't do it are there problems to have a folder that contains a file for each article (they could be 100+) ?

To be more clear this is [article].js

import React, { useState } from "react";
import { useRouter } from "next/router";
import axios from "axios";
import baseUrl from "../../utils/baseUrl";
import { NoArticleFound } from "../../components/Tools/NoData";
import {
  Header,
  Image as UI_Image,
  Divider,
  Form,
  Icon,
  Button,
  Comment,
} from "semantic-ui-react";
const Copenhagen = "../../public/Copenhagen.jpg";
import Image from "next/image";

function Article({ article, errorLoading }) {

  if (errorLoading) return <NoArticleFound />;

  const router = useRouter();

  return (
    <main>
      <article>
        <header>
          <h1>{article.title}</h1>
        </header>
        <Header as="h3">
          <UI_Image src={article.authorPicUrl} avatar />
          <Header.Content>
            {article.author}
            <Header.Subheader>
              {article.publicationDate} · {article.readingTime} min read
            </Header.Subheader>
          </Header.Content>
        </Header>
        <Divider />
        {article.content}
        <Divider hidden />
      </article>
    </main>
  );
}
Article.getInitialProps = async (ctx) => {
  try {
    const { article } = ctx.query;
    const title = article;
    const res = await axios.get(`${baseUrl}/api/articles/${title}`);
    return { article: res.data };
  } catch (error) {
    return { errorLoading: true };
  }
};

export default Article;

Answer 1

Change your article.content to as shown below. This is how you can render HTML content.

   <span
     dangerouslySetInnerHTML={{
      __html: article.content,
     }}
   />