Next.js 页面无法路由答案

【问题标题】：Next.js The page cannot be routedNext.js 页面无法路由
【发布时间】：2020-10-27 18:11:54
【问题描述】：

开发环境
下一个.js
打字稿
样式化组件

我在构建 next.js 环境时做了什么
纱线创建下一个应用程序
yarn add --dev typescript @types/react @types/node
纱线添加样式组件纱线添加 -D @types/styled-components

上面的四个我跑了

我不明白

执行上述命令，搭建next.js的环境。

我在 pages 目录下创建了 user.tsx 并访问了 pages/users，但是我得到了 404 Not Found 错误。为什么？

packege.json

{
  "name": "next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.4.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.18",
    "@types/react": "^16.9.41",
    "@types/styled-components": "^5.1.0",
    "typescript": "^3.9.6"
  }
}

import React, { FC } from "react";
import styled from "styled-components";
import Sidebar from "../components/atoms/SideBar";
import UserList from "../components/atoms/UserList";

const UsersStyle = styled.div`
  display: flex;
  height: 100vh;
`;

export const User: FC = () => {
  return (
    <UsersStyle>
      <Sidebar />
      <UserList />
    </UsersStyle>
  );
};

【问题讨论】：

标签： reactjs typescript webpack next.js styled-components

【解决方案1】：

尝试将代码更改为默认导出。

import React, { FC } from "react";
import styled from "styled-components";
import Sidebar from "../components/atoms/SideBar";
import UserList from "../components/atoms/UserList";

const UsersStyle = styled.div`
  display: flex;
  height: 100vh;
`;

const User: FC = () => {
  return (
    <UsersStyle>
      <Sidebar />
      <UserList />
    </UsersStyle>
  );
};

export default User;

【讨论】：