{"id":703,"date":"2021-07-21T13:00:40","date_gmt":"2021-07-21T04:00:40","guid":{"rendered":"https:\/\/weseek.co.jp\/tech\/?p=703"},"modified":"2023-04-17T10:29:01","modified_gmt":"2023-04-17T01:29:01","slug":"%e7%85%a9%e3%82%8f%e3%81%97%e3%81%84%e8%a8%ad%e5%ae%9a%e3%81%af%e4%b8%80%e5%88%87%e3%81%aa%e3%81%97%ef%bc%81next-js-%e3%81%a7-css-%e3%82%92%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/weseek.co.jp\/tech\/703\/","title":{"rendered":"\u7169\u308f\u3057\u3044\u8a2d\u5b9a\u306f\u4e00\u5207\u306a\u3057!Next.js\u3067CSS \u3092\u4f7f\u3046\u65b9\u6cd5"},"content":{"rendered":"

\u3053\u306e\u6295\u7a3f\u306f\u3001\u5f0a\u793e\u304c\u63d0\u4f9b\u3059\u308bWESEEK TECH\u901a\u4fe1<\/strong>\u306e\u4e00\u74b0\u3067\u3059\u3002
\nWESEEK TECH\u901a\u4fe1\u3068\u306f\u3001WESEEK\u306e\u30a8\u30f3\u30b8\u30cb\u30a2\u304c\u30ad\u30e3\u30c3\u30c1\u30a2\u30c3\u30d7\u3057\u305f\u6280\u8853\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u3001tech\u30d6\u30ed\u30b0\u3092\u901a\u3058\u3066\u5b9a\u671f\u7684\u306b\u767a\u4fe1\u3057\u3066\u3044\u304f\u3082\u306e\u3067\u3059\u3002<\/p>\n

\u306f\u3058\u3081\u306b<\/h2>\n

\u4eca\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u754c\u9688\u3067\u306f\u3001Next.js \u304c\u6d41\u884c\u3063\u3066\u3044\u307e\u3059\u3002
\n\u305d\u306e\u539f\u56e0\u306e\u4e00\u3064\u306b\u5727\u5012\u7684\u306a\u958b\u767a\u4f53\u9a13\u306e\u826f\u3055\u304c\u3042\u308a\u307e\u3059\u3002
\nNext.js \u3067\u306f\u958b\u767a\u74b0\u5883\u3092\u6574\u3048\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u306f\u5168\u304f\u5fc5\u8981\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n

\u4eca\u56de\u306e\u8a18\u4e8b\u3067\u306f\u3001\u305d\u3093\u306a\u958b\u767a\u4f53\u9a13\u306e\u826f\u3055\u3092\u611f\u3058\u3066\u3082\u3089\u3046\u3079\u304f\u3001Next.js \u3067 CSS \u3092\u4f7f\u3046\u65b9\u6cd5\u3092\u8aac\u660e\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

Next.js \u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3092 v11.0.1<\/a> \u3067\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n

<\/p>\n\n

\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n

\u307e\u305a\u306f\u3001 Next.js \u3092 \u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u307e\u3057\u3087\u3046\u3002
\nNode.js 12.0 \u4ee5\u964d\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u4f7f\u3048\u308c\u3070\u554f\u984c\u306a\u304f\u4f7f\u7528\u53ef\u80fd\u3067\u3059\u3002<\/p>\n

Next.js \u306f\u516c\u5f0f\u304c create-next-app<\/code> \u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002
\ncreate-next-app<\/code> \u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u7c21\u5358\u306b Next.js \u3092\u59cb\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n

npx create-next-app<\/code><\/pre>\n
\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u540d\u524d\u304c\u805e\u304b\u308c\u308b\u306e\u3067\u9069\u5207\u306a\u540d\u524d\u3092\u5165\u529b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u540d\u524d\u3092\u3059\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u69cb\u7bc9\u3055\u308c\u307e\u3059\u3002
\n\u4eca\u56de\u306e\u4f8b\u3067\u306f my-app<\/code> \u3067\u4f5c\u6210\u3057\u3066\u3044\u307e\u3059\u3002\"\"<\/p>\n
typescript \u3092\u4f7f\u3046\u65b9\u306f --typescript<\/code> \u30d5\u30e9\u30b0\u3092\u3064\u3051\u307e\u3057\u3087\u3046\u3002
\nnpx create-next-app --typescript<\/code><\/p>\n
\u3053\u3053\u307e\u3067\u3067\u304d\u305f\u3089 yarn dev<\/code> \u3067\u8d77\u52d5\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
http:\/\/localhost:3000\/<\/a> \u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u8d77\u52d5\u3057\u3066\u3044\u308b\u3053\u3068\u304c\u78ba\u8a8d\u3067\u304d\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
% yarn dev\nyarn run v1.22.4\n$ next dev\nready - started server on 0.0.0.0:3000, url: http:\/\/localhost:3000\ninfo  - Using webpack 5. Reason: Enabled by default https:\/\/nextjs.org\/docs\/messages\/webpack5\nevent - compiled successfully<\/code><\/pre>\n
CSS \u306e\u5c0e\u5165<\/h2>\n
\u30bf\u30a4\u30c8\u30eb\u306b\u306f\u5c0e\u5165\u3068\u66f8\u304d\u307e\u3057\u305f\u304c\u3001\u3059\u3067\u306b CSS \u306e\u5c0e\u5165\u306f\u6e08\u3093\u3067\u304a\u308a\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
sample-app\/styles\/globals.css<\/code><\/p>\n
\u306b CSS \u3092\u8a18\u8ff0\u3057\u3066\u3044\u304f\u3053\u3068\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u5145\u3066\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
\u66f8\u3044\u305f CSS \u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u308b\u306e\u304c _app.jsx<\/code> \u3067\u3059\u3002<\/p>\n
import '..\/styles\/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n  return <Component {...pageProps} \/>\n}\n\nexport default MyApp<\/code><\/pre>\n
\u8aad\u307f\u8fbc\u3093\u3060 CSS \u306f\u5168\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u6709\u52b9\u306b\u306a\u308a\u307e\u3059\u3002  <\/p>\n
\u7279\u5b9a\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306e\u307f\u9069\u5fdc\u3055\u308c\u308b CSS \u3092\u7528\u610f\u3057\u305f\u3044\u5834\u5408\u306f\u3001 CSS Modules<\/a><\/strong> \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
CSS Modules \u3082\u73fe\u5728\u306e Next.js \u306e\u30d0\u30fc\u30b8\u30e7\u30f3(v11.0.1)\u3067\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
sample-app\/styles\/Home.module.css<\/code><\/p>\n
\u3092\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002  <\/p>\n
\u3053\u3061\u3089\u306b CSS \u304c\u8a18\u8ff0\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u4f7f\u7528\u3059\u308b\u5834\u6240\u3067\u306f\u6b21\u306e\u3088\u3046\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n
import Head from 'next\/head'\nimport styles from '..\/styles\/Home.module.css'\n\nexport default function Home() {\n  return (\n    <div className={styles.container}>\n    \/\/ \u4e2d\u7565\n      <main className={styles.main}>\n        <h1 className={styles.title}>\n          Welcome to <a href="https:\/\/nextjs.org">Next.js!<\/a>\n        <\/h1>\n      <\/main>\n\n    <\/div><\/code><\/pre>\n
styles.{{class\u540d}}<\/code> \u306b\u3088\u3063\u3066 CSS \u30d5\u30a1\u30a4\u30eb\u306b\u6307\u5b9a\u3057\u305f class \u3092\u305d\u306e\u307e\u307e\u9069\u5fdc\u3067\u304d\u307e\u3059\u3002  <\/p>\n
CSS Modules \u3067\u8a18\u8f09\u3057\u305f\u30b9\u30bf\u30a4\u30eb\u306f\u3001\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3067\u306e\u307f\u6709\u52b9\u3067\u3059\u3002
\n\u305d\u306e\u305f\u3081\u4e88\u671f\u3057\u306a\u3044\u5834\u6240\u306b\u9069\u5fdc\u3055\u308c\u3066\u4e88\u60f3\u5916\u306e\u8868\u793a\u5d29\u308c\u304c\u767a\u751f\u3057\u3066\u3057\u307e\u3046\u4e8b\u304c\u306a\u3044\u306e\u304c\u30e1\u30ea\u30c3\u30c8\u3067\u3059\u3002<\/p>\n
\u307e\u3068\u3081<\/h2>\n
Next.js \u3067 CSS \u3092\u4f7f\u3046\u65b9\u6cd5\u306f\u4ed6\u306b\u3082\u3042\u308a\u307e\u3059\u3002
\nCSS-in-JS \u3068\u3044\u3046\u65b9\u6cd5\u3092\u4f7f\u3046\u3053\u3068\u3067 js or ts \u30d5\u30a1\u30a4\u30eb\u306b CSS \u3092\u8a18\u8f09\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
\u3055\u307e\u3056\u307e\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001 CSS-in-JS \u3092\u4f7f\u3063\u305f\u65b9\u6cd5\u306f\u5225\u306e\u6a5f\u4f1a\u306b\u7d39\u4ecb\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u30b5\u30a4\u30c8<\/h2>\n