使用nextJS与CRA创建的应用程序结构相同吗？

Question

我将使用create-react-app创建的应用迁移到nextJs。我同时学习nextjs，我想知道是否可以使用nextJs在我的应用程序中使用相同的结构。

我的带有create-react-app的应用程序结构：

index.js

import React from "react";
import configureStore from "./store";
import App from "./App";


const store = configureStore();

render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById("root")
);

App.js

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import IndexAdmin from "./containers/IndexAdmin";
import IndexUser from "./containers/IndexUser";
import PrivateRoute from "./containers/PrivateRoute";


const App = () => (
  <Router>
    <div className="main-container">
      <PrivateRoute path="/admin" component={IndexAdmin} />{" "}
      <Route path="/order/:id" component={IndexUser} />
    </div>
  </Router>
);

export default App;

在这里，我有两个主要路径“ order”和“ admin”，其中两个文件用于管理应用程序的一般状态

例如在indexUser.js中

import React, { Component } from "react";
import { HashRouter as Router, Switch, Redirect } from "react-router-dom";

import * as actionsRestaurant from "../services/actions/restaurant.actions";
import * as actionsOrder from "../services/actions/order.actions";
import * as actionsUser from "../services/actions/user.actions";
import TemplateWrapper from "../components/user/TemplateWrapper";

import { connect } from "react-redux";
import Cart from "./Cart";
import Home from "./Home";
import Menu from "./Menu";

class IndexUser extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isInIframe: window.location != window.parent.location,
      restaurant: {
        idMenuSelected: null,
        slogan: "",
        name: ""
      },
      connectedIpad: props.restaurant.connectedIpad,
      openService: props.restaurant.serviceOpen,
      screenDesktop: isDesktop(window),
      restaurantNotReady: false,
      errorMessageSecond: "",
      intervalIdIpad: null,
      onlineStatus: true,
      isDelivery: false,
      errorMessage: "",
      errorUrl: false,
      mobile: false,
      loader: true
    };
  }

  async componentDidMount() {
    //do something
  }

  componentDidUpdate(prevProps) {
    //do something
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    //do something
  }

  shouldComponentUpdate(nextProps, nextState) {
    //do something
  }

  async checkIfDataInLocalStorage(idRestaurant, hasMenu) {
    // code etc
  }

  render() {
    const { hash } = this.props.location;
    const {
      restaurantNotReady,
      errorMessageSecond,
      connectedIpad,
      screenDesktop,
      errorMessage,
      onlineStatus,
      openService,
      isInIframe,
      errorUrl
    } = this.state;
    return (
      <React.Fragment>
        <Router>
          <div className={`container user-container`}>
            <Header
              className="container is-fluid"
              restaurantNotReady={restaurantNotReady}
              slogan={this.state.restaurant.slogan}
              name={this.state.restaurant.name}
              connectedIpad={connectedIpad}
              isOpenService={openService}
              active={this.state.active}
              isOnline={onlineStatus}
              isInIframe={isInIframe}
              errorUrl={errorUrl}
              hash={hash}
            />
            <div className={`content container is-centered ${container}`}>
              <Switch>
                <Redirect exact from="/" to="/home" />
                <PropsRoute
                  path="/home"
                  component={TemplateWrapper(Home)}
                  isDelivery={this.state.isDelivery}
                  isDeliveryOrTakeAway={this.isDeliveryOrTakeAway}
                  name={this.state.restaurant.name}
                  slogan={this.state.restaurant.concept}
                  updateLoader={this.updateLoader}
                />
                <PropsRoute
                  path="/carte"
                  component={TemplateWrapper(Menu)}
                  isDelivery={this.state.isDelivery}
                />
                <PropsRoute
                  path="/panier"
                  component={TemplateWrapper(Cart)}
                  isDelivery={this.state.isDelivery}
                />
              </Switch>
            </div>
          </div>
        </Router>
      </React.Fragment>
    );
  }
}

const mapStateToProps = state => {
  const { restaurant, loader } = state;
  return {
    restaurant: restaurant.infoRestaurant,
    dataLoaded: loader.dataLoaded
  };
};

const mapDispatchToProps = dispatch => {
  return {
    actionRestaurant: bindActionCreators(actionsRestaurant, dispatch),
    actionOrder: bindActionCreators(actionsOrder, dispatch),
    actionUser: bindActionCreators(actionsUser, dispatch)
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(IndexUser);

并且我在indexAdmin中具有相同的逻辑，所以每个文件都管理一般路径的一般状态，但是在nextJs中，我该如何做同样的事情？我们在nextJs中只有入口点，它是文件_app.js，我不能拥有管理一般的“ order”路径的文件indexUser和“ admin”路径的indexAdmin，对吗？谢谢您的帮助！