为什么Next.js不能导入文件夹下的文件

Question

Module not found: Can't resolve 'components/layout's Codes\nextjs-blog\pages\posts'
> 1 | import Layout from 'components/layout'
  2 | import Link from 'next/link'
  3 | import Head from 'next/head'

好的，这是错误消息，我得到了任何人有一个想法

我在 nextjs-blog 下有我的组件文件夹，并且给出错误的 js 文件在帖子下

我没有提供太多信息，因为我是 Next js 的新手，不知道任何人需要什么

如果我这样做是行不通的

import Layout from '../components/layout'

Desktop/Marti's Codes/nextjs-blog <- 这是基本 nextjs 文件夹的路径 我几乎没有更改代码和文件中的文件夹

我在基本文件夹中添加了组件文件夹，在组件中我有两个文件：layout.js layout.module.js

然后在页面中我有帖子文件夹，并在那里 first-post.js 这是从组件导入布局文件的文件

Answer 1

它应该是

import Layout from '../../components/layout'

感谢 juliomalves 的回答

Answer 2

您需要使用相对路径来导入组件，即../components/layout 。

要使用像components/layout这样的绝对导入，我们在jsconfig.json中设置如下别名。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

并像这样使用

import Layout from '@/components/layout' 

参考： https://nextjs.org/docs/advanced-features/module-path-aliases