こちらで行ったのと同じことを　Typescript で行いました。
Next.js の使い方 css

プロジェクトの作成

yarn create next-app blog-type --typescript

ソースの作成

フォルダー構造

$ tree -I node_modules/
.
├── README.md
├── components
│   ├── layout.module.css
│   └── layout.tsx
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│   ├── _app.tsx
│   ├── api
│   │   └── hello.ts
│   ├── index.tsx
│   └── posts
│       └── first-post.tsx
├── public
│   ├── favicon.ico
│   ├── images
│   │   └── profile.jpg
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   ├── globals.css
│   └── utils.module.css
├── tsconfig.json
└── yarn.lock

次のものは、Next.js の使い方 cssのファイル名を変更したものです。

pages/index.tsx <- pages/index.js
pages/posts/first-post.tsx <- pages/posts/first-post.js
components/layout.tsx <- components/layout.js

次のファイルは、Next.js の使い方 css　と同じです。
components/layout.module.css
styles/globals.css
styles/utils.module.css

public/images/profile.jpg
は、何か、jpg ファイルを入れてください。

サーバーの起動

yarn dev

ブラウザーで
http://localhost:3000/
にアクセス