与 create-react-app 相比，create-next-app 在包方面存在一些问题

Question

我之前使用过 create-react-app 存储库。但最近我正在使用 create-next-app repo 进行服务器端渲染。我用 npx create-react-app 创建了一个项目，并从 github 安装了一个包，例如 npm install react-burger-menu --save，然后在 App.js 中使用它。一切正常：

import './App.css';
import { slide as Menu } from 'react-burger-menu'

function App() {
    var styles = {
     ...
    }


    return (
    <div className="App">
      <Menu styles={styles}>
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
        <a id="contact" className="menu-item" href="/contact">Contact</a>
        <a className="menu-item--small" href="">Settings</a>
      </Menu>
    </div>
  );
}

export default App;

但是我在项目中使用这个包 npx create-next-app:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import {slide as Menu} from "react-burger-menu";

export default function Home() {
    var styles = {
     ...
    }
    return (
        <Menu styles={ styles } >
            <a id="home" className="menu-item" href="/">Home</a>
            <a id="about" className="menu-item" href="/about">About</a>
            <a id="contact" className="menu-item" href="/contact">Contact</a>
            <a className="menu-item--small" href="">Settings</a>
        </Menu>
    );
}

但它会产生以下错误：

Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

这个错误几乎出现在我安装的每个包中

Answer 1

当您使用 npx create-next-app 创建下一个应用程序时，它会在一个文件夹中创建您的项目（默认 my-app）。因此，在安装任何包（或 init git）之前，您需要运行 cd my-app（在 Git bash 终端中）位于项目目录中。否则它将在错误的目录中创建一个新的 package.json。

与 create-react-app 相比，create-next-app 在包方面存在一些问题

create-next-app has some issue with packages compared with create-react-app

reactjs

create-react-app

next.js