为什么我的 next.js 代码都被视为字符串值？

问：

之后的整个代码

<li><a href="#contact">Contact</a></li> 

（第 11 行向下）标识为字符串值。每当我在代码的任何地方添加破折号“/”时，这种情况都会改变，只有添加破折号后的接下来几行代码成为正常语法，如果我再添加一行，那么接下来的几行只会成为正常语法，依此类推。我正在尝试使用 next.js 制作网站

import React from 'react';

const Header = () => {
  return (
    <header>
      <nav className="navbar">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  );
};

const About = () => {
  return (
    <section id="about" className="section">
      <h2 style={{ textAlign: 'center' }}>About Me</h2>
      <div className="content">
        <p style={{ color: '#fff', textAlign: 'center' }}>infromation</p>
      </div>
    </section>
  );
};

const Projects = () => {
  return (
    <section id="projects" className="section">
      <h2 style={{ textAlign: 'center' }}>Projects</h2>
      <div className="content info-grid">
        <div className="info-box">
          <h3 style={{ color: '#fff', textAlign: 'center' }}>Project 1</h3>
          <p style={{ color: '#fff', textAlign: 'center' }}>infromation.</p>
        </div>
        <div className="info-box">
          <h3 style={{ color: '#fff', textAlign: 'center' }}>Project 2</h3>
          <p style={{ color: '#fff', textAlign: 'center' }}>infromation.</p>
        </div>
        <div className="info-box">
          <h3 style={{ color: '#fff', textAlign: 'center' }}>Project 3</h3>
          <p style={{ color: '#fff', textAlign: 'center' }}>infromation.</p>
        </div>
        {/* Add more projects*/}
      </div>
    </section>
  );
};

const Skills = () => {
  return (
    <section id="skills" className="section">
      <h2 style={{ textAlign: 'center' }}>Skills</h2>
      <div className="content info-grid">
        <div className="info-box">
          <h3 style={{ color: '#fff', textAlign: 'center' }}>Coding</h3>
          <ul>
            <li style={{ color: '#fff' }}>Python</li>
            <li style={{ color: '#fff' }}>JavaScript</li>
            {/* Add more coding skills*/}
          </ul>
        </div>
        <div className="info-box">
          <h3 style={{ color: '#fff', textAlign: 'center' }}>Robotics</h3>
          <ul>
            <li style={{ color: '#fff' }}>Robotic Systems</li>
            <li style={{ color: '#fff' }}>Control Systems</li>
            {/* Add more robotics skills*/}
          </ul>
        </div>
        <div className="info-box">
          <h3 style={{ color: '#fff', textAlign: 'center' }}>Web Development</h3>
          <ul>
            <li style={{ color: '#fff' }}>HTML</li>
            <li style={{ color: '#fff' }}>CSS</li>
            <li style={{ color: '#fff' }}>JavaScript</li>
            {/* Add more web development skills*/}
          </ul>
        </div>
      </div>
    </section>
  );
};

const Contact = () => {
  return (
    <section id="contact" className="section">
      <h2>Contact Me</h2>
      <div className="content">
        <p style={{ color: '#fff' }}>Feel free to reach out to me using the contact details below:</p>
        <ul>
          <li style={{ color: '#fff' }}>Email: [email protected]</li>
          <li style={{ color: '#fff' }}>Phone: 123-456-7890</li>
          {/* Add more contact details*/}
        </ul>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer>
      <p>&copy; 2023 All rights reserved.</p>
    <footer>
  );
};

const IndexPage = () => {
  return (
    <div>
      <Header />
      {/* Place other components here */}
      <About/>
      <Projects />
      <Skills />
      <Contact />
      <Footer />
    </div>
  );
};

export default IndexPage;

如果我在后面添加一个破折号（标记如下），那么它下面的 9 行就会从字符串变量变为正常语法。<li><a href="#contact">Contact</a></li>

import React from 'react';

const Header = () => {
  return (
    <header>
      <nav className="navbar">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#skills">Skills</a></li>
>           <li><a href="#contact">Contact</a></li>**/**
        </ul>
      </nav>
    </header>
  );
};

const About = () => {
  return (
    <section id="about" className="section">
      <h2 style={{ textAlign: 'center' }}>About Me</h2>
      <div className="content">
        <p style={{ color: '#fff', textAlign: 'center' }}>infromation</p>
      </div>
    </section>
  );
};

这是我得到的每个文本正文的错误类型，

 x Unexpected token. Did you mean `{'>'}` or `>`?
     ,-[/Users/name/firstsite/app/page.js:108:1]
 108 |   );
 109 | };
 110 | 
 111 | const IndexPage = () => {
     :                       ^
 112 |   return (
 113 |     <div>
 114 | 

它告诉我“你是不是说>”，而这正是那里的内容。