怎么用 npx create-next-app@latest --ts 创建一个nextjs 拥有多路由pages的项目
使用 npx create-next-app@latest --ts
命令创建的 Next.js 项目默认只包含一个 /pages
目录,但是你可以轻松地添加更多的路由。下面是一些步骤:
创建一个名为 pages
的新目录。
在 pages
目录中创建一个或多个新文件,每个文件都将成为您应用程序中的一个新路由。文件名即为路由路径,例如,pages/about.tsx
将成为 /about
路由。
打开终端并在项目的根目录中运行 npm run dev
命令来启动开发服务器并查看新路由是否可用。
这样你就可以拥有多个路由的 Next.js 项目了!
为什么我创建了是/app目录 没有pages目录
如果你使用 npx create-next-app@latest --ts
命令创建 Next.js 项目时,生成的项目结构中没有 pages
目录,而是一个名为 app
的目录。这是因为 Next.js 在版本 11 中对项目结构进行了更改,将默认的页面目录从 /pages
改为 /app
。
如果你想使用旧的 /pages
目录结构,可以在创建项目时添加 --legacy-pages
参数,即 npx create-next-app@latest --ts --legacy-pages
。这将使用旧的目录结构创建项目。请注意,这可能会导致一些限制和不兼容性,因此建议您使用新的 /app
目录结构。
用新的/app目录怎么建多个路由文件?
使用 /app
目录结构创建多个路由文件的步骤如下:
创建一个名为 pages
的新目录。
在 pages
目录中创建一个或多个新文件夹,每个文件夹都将成为您应用程序中的一个新路由。文件夹名称即为路由路径,例如,pages/about/index.tsx
将成为 /about
路由。
在每个文件夹中创建一个名为 index.tsx
的 React 组件,这个组件将是该路由的页面内容。
打开终端并在项目的根目录中运行 npm run dev
命令来启动开发服务器并查看新路由是否可用。
这样你就可以拥有多个路由的 Next.js 项目了!请注意,使用 /app
目录结构创建多个路由时,文件夹名称即为路由路径,因此不需要在文件名后面添加路由路径。如果你想要自定义路由路径,则需要在 pages 目录中手动创建相应的文件夹和文件。
请列出项目目录结构
使用 npx create-next-app@latest --ts
命令创建的 Next.js 项目默认包含以下目录结构:
your-app/
├── .gitignore
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages/
│ └── index.tsx
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── styles/
│ └── Home.module.css
├── tsconfig.json
└── yarn.lock
如果你想要添加多个路由页面,可以在 pages
目录下创建更多的 .tsx
文件,例如:
your-app/
├── .gitignore
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages/
│ ├── about.tsx
│ ├── contact.tsx
│ ├── index.tsx
│ └── products/
│ ├── [productId].tsx
│ └── index.tsx
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── styles/
│ ├── About.module.css
│ ├── Contact.module.css
│ ├── Home.module.css
│ ├── Product.module.css
│ └── Products.module.css
├── tsconfig.json
└── yarn.lock
上面的例子中,我们添加了三个新的路由:/about
、/contact
和 /products
。其中 /products
是一个动态路由,它根据不同的 productId
来展示不同的商品详情页面。同时,我们还在 styles
目录下添加了一些新的 CSS 模块文件,用于定制每个页面的样式。
你这是老的,我新建的是/app 没有/pages
如果你使用 npx create-next-app@latest --ts
命令创建 Next.js 项目时,生成的项目结构中没有 pages
目录,而是一个名为 app
的目录。这是因为 Next.js 在版本 11 中对项目结构进行了更改,将默认的页面目录从 /pages
改为 /app
。
如果你想使用新的 /app
目录结构创建多个路由,可以按照以下步骤进行操作:
创建一个名为 app
的新目录。
在 app
目录中创建一个或多个新文件夹,每个文件夹都将成为您应用程序中的一个新路由。文件夹名称即为路由路径,例如,app/about/index.tsx
将成为 /about
路由。
在每个文件夹中创建一个名为 index.tsx
的 React 组件,这个组件将是该路由的页面内容。
打开终端并在项目的根目录中运行 npm run dev
命令来启动开发服务器并查看新路由是否可用。
这样你就可以拥有多个路由的 Next.js 项目了!请注意,使用 /app
目录结构创建多个路由时,文件夹名称即为路由路径,因此不需要在文件名后面添加路由路径。如果你想要自定义路由路径,则需要在 app 目录中手动创建相应的文件夹和文件。
我参考你说的建了一个 /app/test/index.tsx 报错 GET http://localhost:3000/test 404 (Not Found)
如果你在 Next.js 项目中创建了一个名为 /app/test/index.tsx
的页面组件,但是访问 http://localhost:3000/test
的时候出现了 404 错误,可能是因为你没有正确配置路由。
在 Next.js 中,默认情况下,所有的 .tsx
文件都可以被当做路由来使用,路由路径就是文件名(去除 .tsx
后缀)。例如,/pages/about.tsx
对应的路由路径是 /about
。对于 /app/test/index.tsx
这个路径,你可以通过访问 http://localhost:3000/app/test
来查看这个页面。
如果你想将 /app/test/index.tsx
映射到 /test
路径上,可以在项目根目录下创建一个 _app.tsx
文件,并添加如下代码:
import { AppProps } from 'next/app'
import { useRouter } from 'next/router'
function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter()
const { asPath } = router
if (asPath.startsWith('/test')) {
return <Component {...pageProps} />
}
return null
}
export default MyApp
这样,当访问 /test
路径时,MyApp
组件会将请求渲染到 /app/test/index.tsx
页面组件上。如果你想映射更多的路由路径,请在条件语句中添加相应的判断逻辑即可。
建了个 /app/test1.tsx 报错 GET http://localhost:3000/test1 404 (Not Found)
在 Next.js 中,路由是通过文件名和目录结构来定义的。如果你创建了一个 app/test1.tsx
文件,并尝试访问 http://localhost:3000/test1
路径,可能会出现 404 错误。这是因为 Next.js 默认情况下不会将 app
目录下的文件作为路由处理。
要解决这个问题,你需要在 next.config.js
文件中配置路由映射,以便 Next.js 可以将 /test1
映射到 app/test1.tsx
文件。具体步骤如下:
在项目根目录下创建一个名为 next.config.js
的文件(如果已存在,则跳过此步骤)。
在 next.config.js
文件中添加以下代码:
module.exports = {
async rewrites() {
return [
{
source: '/test1',
destination: '/app/test1'
}
]
}
}
上面的代码告诉 Next.js 当用户访问 /test1
路径时,应该重写到 app/test1.tsx
文件。你可以通过添加更多的对象到 rewrites
数组来添加更多的路由映射。
http://localhost:3000/test1
,看看是否已经解决了问题。希望这能帮助你解决问题!
有一个 /app/layout.tsx文件,内容如下: import './globals.css' import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = { title: 'Create Next App', description: 'Generated by create next app', }
export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } 干什么用的
/app/layout.tsx
文件定义了一个 Next.js 页面的根布局。它使用了一些全局 CSS 样式,并通过 next/font/google
库引入了 Google Fonts 中的 Inter 字体。
在这个文件中,还定义了一个名为 metadata
的对象,用于存储页面的元数据,例如标题和描述信息。这个对象可以被子组件访问,并且可以用于设置 HTML 头部的 <title>
和 <meta>
标签。
RootLayout
组件是这个文件的默认导出,它接受一个 children
属性作为其子组件。在这个组件中,我们将子组件包裹在 <html>
和 <body>
标签中,并应用了 Inter 字体的类名。这样可以确保整个应用程序都使用相同的字体。
通常情况下,你不需要修改 /app/layout.tsx
文件,因为它只是一个基础布局。如果你需要更改页面的外观和行为,请编辑页面组件本身。
我要加 /app/test/index.tsx; /app/about/index.tsx 需要改什么
使用 /app
目录结构创建多个路由,你需要按以下步骤进行操作:
创建一个名为 app
的新目录。
在 app
目录中创建一个或多个新文件夹,每个文件夹都将成为您应用程序中的一个新路由。文件夹名称即为路由路径,例如,app/about
将成为 /about
路由。
在每个文件夹中创建一个名为 index.tsx
的 React 组件,这个组件将是该路由的页面内容。
打开终端并在项目的根目录中运行 npm run dev
命令来启动开发服务器并查看新路由是否可用。
所以,为了添加 /app/test
和 /app/about
这两个路由,你需要按照如下方式进行操作:
创建一个名为 app
的新目录。在该目录下创建两个子目录 test
和 about
。
在 test
和 about
目录中分别创建一个名为 index.tsx
的 React 组件,这个组件将是该路由的页面内容。
打开终端并在项目的根目录中运行 npm run dev
命令来启动开发服务器,并访问 http://localhost:3000/app/test
和 http://localhost:3000/app/about
查看新路由是否可用。
如果你需要使用 TypeScript,可以添加 --ts
参数来创建一个TypeScript项目,即 npx create-next-app@latest --ts
。
http://localhost:3000/app/test 也是 404
要在 Next.js 项目中使用 /app
目录结构创建多个路由,需要在项目的根目录下创建一个名为 pages
的软链接,指向 app
目录。这样,Next.js 将能够找到您在 /app
目录中创建的所有页面。
以下是如何创建软链接的步骤:
打开终端并进入项目的根目录。
运行一下命令创建软链接:
ln -s app pages
npm run dev
现在您可以通过访问 http://localhost:3000/test
来访问 /app/test
路径了。同样地,您可以在 /app
目录中创建更多页面,并通过它们的文件夹名称来访问它们。例如,/app/about/index.tsx
可以通过访问 http://localhost:3000/about
来访问。
请注意,如果您使用 npx create-next-app@latest --ts
命令创建了 Next.js 项目,并且没有手动更改项目结构,则不需要创建软链接,因为默认情况下 /app
目录已被映射到 /pages
目录中。如果你想要使用旧的 /pages
目录结构,请在创建项目时添加 --legacy-pages
参数,即 npx create-next-app@latest --ts --legacy-pages
。