├── cypress.json
├── .husky
└── pre-commit
├── public
├── favicon.ico
└── vercel.svg
├── .prettierrc.json
├── next.config.js
├── cypress
├── fixtures
│ └── example.json
├── integration
│ └── app.spec.ts
├── support
│ ├── index.ts
│ └── commands.ts
└── plugins
│ └── index.ts
├── next-env.d.ts
├── pages
├── _app.tsx
├── api
│ └── hello.ts
├── about.tsx
└── index.tsx
├── .eslintrc.json
├── styles
├── globals.css
└── Home.module.css
├── __tests__
└── index.test.tsx
├── lint-staged.config.js
├── .gitignore
├── tsconfig.json
├── jest.config.ts
├── .github
└── workflows
│ └── test.yml
├── LICENSE
├── package.json
└── README.md
/cypress.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 |
4 | yarn lint-staged
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wk0/boilerplate-next/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "semi": false,
3 | "trailingComma": "es5",
4 | "singleQuote": true,
5 | "tabWidth": 2,
6 | "useTabs": false
7 | }
8 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | }
5 |
6 | module.exports = nextConfig
7 |
--------------------------------------------------------------------------------
/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Using fixtures to represent data",
3 | "email": "hello@cypress.io",
4 | "body": "Fixtures are a great way to mock data for responses to routes"
5 | }
6 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import type { AppProps } from 'next/app'
3 |
4 | function MyApp({ Component, pageProps }: AppProps) {
5 | return
6 | }
7 |
8 | export default MyApp
9 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["@typescript-eslint"],
3 | "extends": [
4 | "next/core-web-vitals",
5 | "plugin:jest-dom/recommended",
6 | "plugin:@typescript-eslint/recommended",
7 | "prettier"
8 | ],
9 | "rules": {
10 | "@typescript-eslint/no-unused-vars": "error"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | padding: 0;
4 | margin: 0;
5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7 | }
8 |
9 | a {
10 | color: inherit;
11 | text-decoration: none;
12 | }
13 |
14 | * {
15 | box-sizing: border-box;
16 | }
17 |
--------------------------------------------------------------------------------
/pages/api/hello.ts:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | import type { NextApiRequest, NextApiResponse } from 'next'
3 |
4 | type Data = {
5 | name: string
6 | }
7 |
8 | export default function handler(
9 | req: NextApiRequest,
10 | res: NextApiResponse
11 | ) {
12 | res.status(200).json({ name: 'John Doe' })
13 | }
14 |
--------------------------------------------------------------------------------
/__tests__/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react'
2 | import Home from '../pages/index'
3 | import '@testing-library/jest-dom'
4 |
5 | describe('Home', () => {
6 | it('renders a heading', () => {
7 | render()
8 |
9 | const heading = screen.getByRole('heading', {
10 | name: /Home Page/i,
11 | })
12 |
13 | expect(heading).toBeInTheDocument()
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/lint-staged.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | // Type check TypeScript files
3 | '**/*.(ts|tsx)': () => 'yarn tsc --noEmit',
4 |
5 | // Lint then format TypeScript and JavaScript files
6 | '**/*.(ts|tsx|js)': (filenames) => [
7 | `yarn eslint --fix ${filenames.join(' ')}`,
8 | `yarn prettier --write ${filenames.join(' ')}`,
9 | ],
10 |
11 | // Format MarkDown and JSON
12 | '**/*.(md|json)': (filenames) =>
13 | `yarn prettier --write ${filenames.join(' ')}`,
14 | }
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 |
34 | # vercel
35 | .vercel
36 |
37 | # typescript
38 | *.tsbuildinfo
39 |
--------------------------------------------------------------------------------
/cypress/integration/app.spec.ts:
--------------------------------------------------------------------------------
1 | // cypress/integration/app.spec.js
2 |
3 | describe('Navigation', () => {
4 | it('should navigate to the about page', () => {
5 | // Start from the index page
6 | cy.visit('http://localhost:3000/')
7 |
8 | // Find a link with an href attribute containing "about" and click it
9 | cy.get('a[href*="about"]').click()
10 |
11 | // The new url should include "/about"
12 | cy.url().should('include', '/about')
13 |
14 | // The new page should contain an h1 with "About page"
15 | cy.get('h1').contains('About Page')
16 | })
17 | })
18 |
19 | const asModule = {}
20 | export default asModule
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "types": ["jest", "node", "@types/testing-library__jest-dom"]
18 | },
19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
20 | "exclude": ["node_modules", "cypress"]
21 | }
22 |
--------------------------------------------------------------------------------
/jest.config.ts:
--------------------------------------------------------------------------------
1 | import nextJest from "next/jest";
2 | // Sync object
3 | const createJestConfig = nextJest({
4 | // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
5 | dir: "./",
6 | });
7 |
8 | // Add any custom config to be passed to Jest
9 | const customJestConfig = {
10 | // Add more setup options before each test is run
11 | setupFilesAfterEnv: ["@testing-library/jest-dom"], // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
12 | moduleDirectories: ["node_modules", "/"],
13 | testEnvironment: "jest-environment-jsdom",
14 | modulePathIgnorePatterns: ["cypress"],
15 | };
16 |
17 | module.exports = createJestConfig(customJestConfig);
18 |
--------------------------------------------------------------------------------
/cypress/support/index.ts:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example support/index.js is processed and
3 | // loaded automatically before your test files.
4 | //
5 | // This is a great place to put global configuration and
6 | // behavior that modifies Cypress.
7 | //
8 | // You can change the location of this file or turn off
9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 |
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 |
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 |
--------------------------------------------------------------------------------
/pages/about.tsx:
--------------------------------------------------------------------------------
1 | import type { NextPage } from 'next'
2 | import Head from 'next/head'
3 | import Link from 'next/link'
4 |
5 | const About: NextPage = () => {
6 | return (
7 |
8 |
9 |
Next App Typescript Boilerplate
10 |
11 |
12 |
13 |
14 |
15 |
20 |
21 |
22 | About Page
23 |
24 |
25 |
28 |
8 |
9 |
Next App Typescript Boilerplate
10 |
11 |
12 |
13 |
14 |
15 |
20 |
21 |
22 | Home Page
23 |
24 |
25 |
28 |