npx create-next-app . --typescript
yarn add axios swr
configファイル新規作成
touch .prettierrc
.prettierrcに下記内容を追加
{
"singleQuote": true,
"semi": false
}
yarn add -D [email protected] [email protected] [email protected] @testing-library/react @testing-library/jest-dom jest-css-modules @types/node-fetch
touch jest.config.js
const nextJest = require('next/jest')
const createJestConfig = nextJest({
dir: './',
})
const customJestConfig = {
moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jest-environment-jsdom',
}
module.exports = createJestConfig(customJestConfig)
"scripts": {
...
"test": "jest --watch"
},
https://tailwindcss.com/docs/guides/nextjs
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
const Home: React.FC = () => {
return (
<div className="flex justify-center items-center flex-col min-h-screen font-mono">
Hello Nextjs
</div>
)
}
export default Home
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import Home from '../pages/index'
it('Should render hello text', () => {
render(<Home />)
expect(screen.getByText('Hello Nextjs')).toBeInTheDocument()
})
PASS __tests__/Home.test.tsx
✓ Should render hello text (20 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.728 s, estimated 2 s