Next.jsセットアップ
構成
src/
一旦pagesなどはsrc/に入れる。
src/components/
コンポーネントを配置
src/globalStates/
recoilのatomを配置
作成の前に
ホスティングにVercelを使う場合はVercelで使えるNodeのversionを確認すること
NextAuthを使う場合はopenid-connectが対応しているnodeのバージョンも確認しておくこと npmを使う
yarnやpnpmでもいいが今やそれほど差もないので標準に寄せた方が安全そう
作成
code:bash
$ npx create-next-app@latest --typescript project with-jest with-jest-app
$ cd project/
必要なディレクトリの追加・移動
code:bash
$ mkdir src src/components src/globalStates
$ mv pages src/
$ mv styles src/
envの追加
code:bash
$ touch .env .env.local .env.production.local
VSCode
code:bash
$ code .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
ChakraUI
code:bash
$ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/icons
code:pages/_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";
function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
Recoil
code:bash
$ npm i recoil
code:pages/_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";
import { RecoilRoot } from "recoil";
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
</RecoilRoot>
);
}
export default MyApp;
Jest & React Testing Library
code:bash
$ npm i -D jest @testing-library/react @testing-library/jest-dom
$ mkdir __tests__
$ touch jest.config.js jest.setup.js
$ vim jest.config.js
// jest.config.js
const nextJest = require("next/jest");
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: "./",
});
// Add any custom config to be passed to Jest
const customJestConfig = {
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
testEnvironment: "jest-environment-jsdom",
};
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);
リンク