This is a Next.js project bootstrapped with create-next-app
.
npx [email protected] . --use-npm
npm i [email protected] [email protected] swr
"prettier": {
"singleQuote": true,
"semi": false
}
npm i [email protected] [email protected]
npm i [email protected]
npm i -D [email protected] @testing-library/[email protected] @types/[email protected] @testing-library/[email protected] @testing-library/[email protected] [email protected] @testing-library/[email protected] [email protected]
touch .babelrc
{
"presets": ["next/babel"]
}
"jest": {
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/"
],
"moduleNameMapper": {
"\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
}
}
"scripts": {
...
"test": "jest --env=jsdom --verbose"
},
https://nextjs.org/learn/excel/typescript/create-tsconfig
touch tsconfig.json
npm i -D typescript @types/[email protected] @types/[email protected]
npm run dev
import { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp
https://tailwindcss.com/docs/guides/nextjs
npm i tailwindcss@latest postcss@latest autoprefixer@latest
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