Open10

読む：Learn Next.js

Next.js
App Router
Yug (やぐ)Yug (やぐ)

無料という言質とれた。あつい

Welcome to the Next.js Foundations course! In this free interactive course, you'll learn the main features of Next.js by building a full-stack web application.

わぉ、結構ガチで作り込むなぁ

For this course, we'll build a financial dashboard that has:

  • A public home page.
  • A login page.
  • Dashboard pages that are protected by authentication.
  • The ability for users to add, edit, and delete invoices.

The dashboard will also have an accompanying database, which you'll set up in a later chapter.

By the end of the course, you'll have the essential skills needed to start building full-stack Next.js applications.

チュートリアルとはいえ結構かかりそう

Yug (やぐ)Yug (やぐ)

え、Vercelにpostgres無料枠みたいなのあるのか！？へぇ

Data Fetching: How to set up a Postgres database on Vercel, and best practices for fetching and streaming.

server-sideでformなんて使うのか？いやクライアントのform内容をサーバに送信して再度検証するとかそういうことか

Form Validation and Accessibility: How to do server-side form validation and tips for improving accessibility.

NextAuthなんてあるのか

Authentication: How to add authentication to your application using NextAuth.js and Middleware.

ほんとにてんこ盛りだな、すごい

Yug (やぐ)Yug (やぐ)

あーそういう感じか、スクラッチではないのね

Unlike tutorials that have you write code from scratch, much of the code for this course is already written for you.

まぁそれはそうか

This better reflects real-world development, where you'll likely be working with existing codebases.

Yug (やぐ)Yug (やぐ)

ほー純粋なcssをそのまま書いてそのクラス名だけ書けばスタイル適用できるというのがcss modulesなのか

...ていうかそれ普通のcssでは？

あーそういう違いがあるのか
要は、違うcssファイルで同じクラス名使っても競合しないようになるらしい

claude 3.7

CSS Modulesは通常のCSSに近いですが、いくつかの重要な違いがあります。

CSS Modulesの主な特徴は、クラス名のスコープがローカルになることです。つまり、同じクラス名を別のファイルで使用しても衝突が起きません。これは、ビルド時にクラス名が自動的に一意の識別子に変換されるためです。

例えば、通常のCSSでは：

/* style.css */
.button {
  color: red;
}

このファイルを読み込むと、.buttonというクラス名はグローバルになり、他のファイルの.buttonと衝突する可能性があります。

一方、CSS Modulesでは：

/* Button.module.css */
.button {
  color: red;
}

実際に使うときは：

import styles from './Button.module.css';

// JSXの場合
return <button className={styles.button}>Click me</button>;

ビルド時に.buttonは自動的に一意の識別子（例えば.Button_button_xk9v2）に変換されるため、他の.buttonクラスと衝突しません。

通常のCSSとの主な違いは、このスコープの局所性とモジュール化されたインポートの仕組みです。確かに書き方自体は普通のCSSと同じですが、使い方と結果が異なります。