Module not found: Can't resolve '@/styles/Home.module.css' 에러

https://nextjs.org/docs/messages/module-not-found
wait  - compiling...
error - ./pages/_app.js:1:0
Module not found: Can't resolve '@/styles/globals.css'
> 1 | import "@/styles/globals.css";
  2 | 
  3 | export default function App({ Component, pageProps }) {
  4 |   return <Component {...pageProps} />;

안녕하세요 강사님 !

섹션 23 example 리액트 세상 강의 중 yarn dev를 입력하면 위와 같은 에러가 확인됩니다.

1. _app.js 파일에서 global.css를 불러오는 부분 @/styles/global.css 을 상대적인 주소로 가져올 수 있도록

// import "@/styles/globals.css";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

위와 같이 변경해봐도 동일한 에러가 발생합니다.

2. global.css 파일을 삭제해봐도 에러가 발생합니다.

이상태에서 index.js 파일에서 주석 처리한 부분을 지우게 되면 아래와 같은 에러가 확인됩니다.

// index.js
import Head from "next/head";
import Image from "next/image";
// import styles from "@/styles/Home.module.css";

제가 다운받은 버전은 package.json 파일에서 아래와 같이 확인할 수 있습니다.

{
  "name": "class",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

강사님 파일에서는 저와 다른 부분이 확인되는데 제가 빼먹은게 있는건지, 새로 다운받아야 하는 것이 있는 걸까요? 버전 차이인 걸까요? 이유가 뭘까요..?

@emotion/client
@next/font

// 제 파일에는 없고 강사님 파일에서 확인되는 부분

3. 그리고 해당 수업 중 질문이 있는데요,

   yarn add 기능 또는 npm install 기능 명령어로 설치 시, 각각 다른 파일에 기록이 된다고 하셨는데요

   강사님께서 package-lock.json 파일을 삭제 하셨는데, 혹시 파일을 삭제하신 이유가

   가급적 yarn.lock 파일로 통일하기 위함이 맞을까요?
   package-lock.json 과 yarn.lock 파일은 서로 다르게 기록이 되어있지 않은가요? 파일이 초기에 생성된 시점이라 한개의 파일을 삭제해도 무방한건지 이와 관련해 궁금합니다.