Closed29
「作って学ぶNext.js/React Webサイト構築」をやってみる&同時に自作サイトを作る
手羽先目的
Next.jsについて知り、扱えるようになる
筆者について
- Gatsby.jsはこの本の筆者、エビスコムさんが書いた本で入門した程度
- Next.jsは本気で何もわからない
- Next.jsの方が人気？有名？で情報が多いのでやってみることにした
- 自分に合っているのはGatsbyかNextか知りたい
それではやっていく。
手羽先サポートページ
github
手羽先next.jsのプロジェクト作成
npx create-next-app blog
Need to install the following packages:
create-next-app@13.1.1
Ok to proceed? (y) y
✔ Would you like to use TypeScript with this project? … No
✔ Would you like to use ESLint with this project? … No
Creating a new Next.js app in /Users/nano/blog.
Using npm.
Installing dependencies:
- react
- react-dom
- next
- @next/font
added 18 packages, and audited 19 packages in 9s
2 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initializing project with template: default
Initialized a git repository.
Success! Created blog at /Users/nano/blog
起動
npm run dev
> blog@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 810 ms (166 modules)
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
かっけぇ。。。
手羽先3.2 CSS Modulesの使い方
- 個別にクラスを指定できないケース
- 固有のクラスが指定されているケース
CMSとか、ローカルのmdファイル扱う時に大切そうなのでメモ。
手羽先Chapter4 レイアウトのスタイル
- すごく丁寧にまとまっている
- ただ、個人的にCSSを一から書くのは辛いので、Chakla UIを使う作戦
- 仕事で「CSSフレームワーク使わずに書いてください」と言われた時にはとても役に立つようなことが沢山書かれていて、最高。
手羽先独自：Challa UI導入
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
_app.js
import Layout from "../components/layout"
import { ChakraProvider } from '@chakra-ui/react'
export default function MyApp({ Component, pageProps }) {
return (
<>
<ChakraProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</ChakraProvider>
</>
)
}
エラー
1 of 1 unhandled error
Server Error
SyntaxError: Named export 'cancelSync' not found. The requested module 'framesync' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'framesync';
const { cancelSync, getFrameData } = pkg;
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/nano/blog/node_modules/@chakra-ui/utils/dist/chunk-SV3JYFGC.mjs (20)
ModuleJob._instantiate
node:internal/modules/esm/module_job (123:21)
async ModuleJob.run
node:internal/modules/esm/module_job (189:5)
async ESMLoader.import
node:internal/modules/esm/loader (527:24)
async importModuleDynamicallyWrapper
node:internal/vm/module (438:15)
Customizing themeをやってみたが変化なし
// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'
// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'
// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
brand: {
900: '#1a365d',
800: '#153e75',
700: '#2a69ac',
},
}
const theme = extendTheme({ colors })
// 3. Pass the `theme` prop to the `ChakraProvider`
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp
検索
同じ現象を発見。解決策がよくわからない。
手羽先アンインストール
npm uninstall @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm info @chakra-ui/react version
s
[
'0.0.0-canary-2021118154929',
~~~~~~
'0.0.0-pr-202215132532',
'1.0.0',
'1.0.1',
'1.0.2',
'1.0.3',
'1.0.4',
'1.1.0',
'1.1.1',
'1.1.2',
'1.1.3',
'1.1.4',
'1.1.5',
'1.1.6',
'1.2.0',
'1.2.1',
'1.3.1',
'1.3.2',
'1.3.3',
'1.3.4',
'1.4.0',
'1.4.1',
'1.4.2',
'1.5.0',
'1.5.1',
'1.5.2',
'1.6.0',
'1.6.1',
'1.6.2',
'1.6.3',
'1.6.4',
'1.6.5',
'1.6.6-next.0',
'1.6.6-next.1',
'1.6.6',
'1.6.7',
'1.6.8',
'1.6.9',
'1.6.10',
'1.6.12',
'1.7.0',
'1.7.1',
'1.7.2',
'1.7.3',
'1.7.4',
'1.7.5',
'1.8.0',
'1.8.1',
'1.8.2',
'1.8.3',
'1.8.4',
'1.8.5',
'1.8.6',
'1.8.7',
'1.8.8',
'1.8.9',
'2.0.0-next.0',
'2.0.0-next.1',
'2.0.0-next.2',
'2.0.0-next.3',
'2.0.0-next.4',
'2.0.0-next.5',
'2.0.0',
'2.0.1',
'2.0.2',
'2.1.0',
'2.1.1',
'2.1.2',
'2.2.0',
'2.2.1',
'2.2.3',
'2.2.4',
'2.2.5',
'2.2.6',
'2.2.7',
'2.2.8',
'2.2.9',
'2.3.0',
'2.3.1',
'2.3.2',
'2.3.3',
'2.3.4',
'2.3.5',
'2.3.6',
'2.3.7',
'2.4.0',
'2.4.1',
'2.4.2',
'2.4.3',
'2.4.4',
'2.4.5'
]
2.4.2のインストール
npm i @chakra-ui/react@2.4.2
依存インストール
npm i @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
動いた！
手羽先ChakraUI 動いた！
index.js
import Header from "components/header"
import Footer from "components/footer"
import Hero from "components/hero"
import Link from 'next/link';
import { Button, ButtonGroup } from '@chakra-ui/react'
export default function Home() {
return (
<>
<Hero></Hero>
<Link href="/blog">aa</Link>
<Button colorScheme='blue'>Button</Button>
</>
)
}
まだ全然情報がないので記事化してみる。あのissue自体は5時間前だったので、最新バグなのかな？
手羽先dependenciesを記録しておけばよかったな。
手羽先書いた。
手羽先Chakra UIを使ってみる
テンプレートサイト
問題
テンプレートサイトがTypeScriptだった。。。
手羽先TypeScriptの導入
touch tsconfig.json
yarn add --dev typescript @types/react @types/node
success Saved lockfile.
success Saved 139 new dependencies.
info Direct dependencies
├─ @chakra-ui/react@2.4.5
├─ @emotion/react@11.10.5
├─ @emotion/styled@11.10.5
├─ @next/font@13.1.1
├─ @types/node@18.11.18
├─ @types/react@18.0.26
├─ framer-motion@6.5.1
├─ next@13.1.1
├─ react-dom@18.2.0
├─ react@18.2.0
└─ typescript@4.9.4
info All dependencies
├─ @babel/code-frame@7.18.6
├─ @babel/helper-module-imports@7.18.6
├─ @babel/helper-plugin-utils@7.20.2
├─ @babel/helper-string-parser@7.19.4
├─ @babel/helper-validator-identifier@7.19.1
├─ @babel/highlight@7.18.6
├─ @babel/plugin-syntax-jsx@7.18.6
├─ @babel/types@7.20.7
├─ @chakra-ui/accordion@2.1.5
├─ @chakra-ui/avatar@2.2.2
├─ @chakra-ui/breadcrumb@2.1.2
├─ @chakra-ui/button@2.0.14
├─ @chakra-ui/card@2.1.4
├─ @chakra-ui/color-mode@2.1.11
├─ @chakra-ui/control-box@2.0.12
├─ @chakra-ui/editable@2.0.17
├─ @chakra-ui/event-utils@2.0.7
├─ @chakra-ui/focus-lock@2.0.14
├─ @chakra-ui/hooks@2.1.3
├─ @chakra-ui/input@2.0.15
├─ @chakra-ui/layout@2.1.12
├─ @chakra-ui/live-region@2.0.12
├─ @chakra-ui/menu@2.1.6
├─ @chakra-ui/modal@2.2.6
├─ @chakra-ui/number-input@2.0.15
├─ @chakra-ui/pin-input@2.0.17
├─ @chakra-ui/popover@2.1.5
├─ @chakra-ui/progress@2.1.3
├─ @chakra-ui/provider@2.0.27
├─ @chakra-ui/radio@2.0.15
├─ @chakra-ui/react-use-interval@2.0.4
├─ @chakra-ui/react-use-outside-click@2.0.6
├─ @chakra-ui/react-use-pan-event@2.0.7
├─ @chakra-ui/react-use-previous@2.0.4
├─ @chakra-ui/react-use-size@2.0.6
├─ @chakra-ui/react-use-timeout@2.0.4
├─ @chakra-ui/react@2.4.5
├─ @chakra-ui/select@2.0.15
├─ @chakra-ui/skeleton@2.0.21
├─ @chakra-ui/slider@2.0.17
├─ @chakra-ui/stat@2.0.14
├─ @chakra-ui/switch@2.0.18
├─ @chakra-ui/table@2.0.14
├─ @chakra-ui/tabs@2.1.6
├─ @chakra-ui/tag@2.0.14
├─ @chakra-ui/textarea@2.0.15
├─ @chakra-ui/theme-tools@2.0.15
├─ @chakra-ui/toast@4.0.7
├─ @chakra-ui/tooltip@2.2.4
├─ @emotion/cache@11.10.5
├─ @emotion/is-prop-valid@0.8.8
├─ @emotion/react@11.10.5
├─ @emotion/sheet@1.2.1
├─ @emotion/styled@11.10.5
├─ @emotion/unitless@0.8.0
├─ @motionone/animation@10.15.1
├─ @motionone/dom@10.12.0
├─ @motionone/easing@10.15.1
├─ @motionone/generators@10.15.1
├─ @next/env@13.1.1
├─ @next/font@13.1.1
├─ @next/swc-darwin-arm64@13.1.1
├─ @popperjs/core@2.11.6
├─ @swc/helpers@0.4.14
├─ @types/lodash.mergewith@4.6.6
├─ @types/lodash@4.14.191
├─ @types/node@18.11.18
├─ @types/parse-json@4.0.0
├─ @types/prop-types@15.7.5
├─ @types/react@18.0.26
├─ @types/scheduler@0.16.2
├─ @zag-js/element-size@0.1.0
├─ ansi-styles@3.2.1
├─ aria-hidden@1.2.2
├─ babel-plugin-macros@3.1.0
├─ callsites@3.1.0
├─ caniuse-lite@1.0.30001441
├─ chalk@2.4.2
├─ client-only@0.0.1
├─ color-convert@1.9.3
├─ color-name@1.1.3
├─ color2k@2.0.0
├─ compute-scroll-into-view@1.0.14
├─ convert-source-map@1.9.0
├─ copy-to-clipboard@3.3.1
├─ cosmiconfig@7.1.0
├─ css-box-model@1.2.1
├─ detect-node-es@1.1.0
├─ error-ex@1.3.2
├─ escape-string-regexp@4.0.0
├─ find-root@1.1.0
├─ focus-lock@0.11.4
├─ framer-motion@6.5.1
├─ function-bind@1.1.1
├─ get-nonce@1.0.1
├─ has-flag@3.0.0
├─ has@1.0.3
├─ hoist-non-react-statics@3.3.2
├─ import-fresh@3.3.0
├─ invariant@2.2.4
├─ is-arrayish@0.2.1
├─ is-core-module@2.11.0
├─ js-tokens@4.0.0
├─ json-parse-even-better-errors@2.3.1
├─ lines-and-columns@1.2.4
├─ nanoid@3.3.4
├─ next@13.1.1
├─ object-assign@4.1.1
├─ parent-module@1.0.1
├─ parse-json@5.2.0
├─ path-parse@1.0.7
├─ path-type@4.0.0
├─ picocolors@1.0.0
├─ popmotion@11.0.3
├─ postcss@8.4.14
├─ prop-types@15.8.1
├─ react-clientside-effect@1.2.6
├─ react-dom@18.2.0
├─ react-fast-compare@3.2.0
├─ react-focus-lock@2.9.2
├─ react-is@16.13.1
├─ react-remove-scroll-bar@2.3.4
├─ react-remove-scroll@2.5.5
├─ react@18.2.0
├─ regenerator-runtime@0.13.11
├─ resolve-from@4.0.0
├─ resolve@1.22.1
├─ scheduler@0.23.0
├─ source-map-js@1.0.2
├─ source-map@0.5.7
├─ styled-jsx@5.1.1
├─ supports-color@5.5.0
├─ supports-preserve-symlinks-flag@1.0.0
├─ tiny-invariant@1.3.1
├─ to-fast-properties@2.0.0
├─ toggle-selection@1.0.6
├─ tslib@2.4.1
├─ typescript@4.9.4
└─ yaml@1.10.2
✨ Done in 84.91s.
jsファイルをtsxにしてyarn dev
手羽先エラー
真っ白
画面が真っ白。
絶対パスが動いていない
jsconfigではなくtsconfig追加。
"baseUrl": "."
を追加したのみ。
なぜ。。
手羽先rm -rf node_modules
npm install
して治った。
バージョン
npm list --depth=0
blog@0.1.0 /Users/nano/blog
├── @chakra-ui/react@2.4.2
├── @emotion/react@11.10.5
├── @emotion/styled@11.10.5
├── @next/font@13.1.1
├── @types/node@18.11.18
├── @types/react@18.0.26
├── framer-motion@6.5.1
├── next@13.1.1
├── react-dom@18.2.0
├── react@18.2.0
└── typescript@4.9.4
手羽先謎だけど、動いたのでヨシ！（良くない
手羽先TS動作確認
テンプレートサイトのheroが動いた。
手羽先
このスクラップは2023/04/08にクローズされました