こちらで行ったのと同じことを 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/
にアクセス