https://github.com/aleydon/next14
Next-14 template configured with typescript, eslint, prettier, husky (pre-commit), storybook, prisma, jest, testing-library and more...
https://github.com/aleydon/next14
javascript jest js next next14 nextjs react reactjs testing-library testing-library-react testing-library-react-hooks ts typescript
Last synced: 6 months ago
JSON representation
Next-14 template configured with typescript, eslint, prettier, husky (pre-commit), storybook, prisma, jest, testing-library and more...
- Host: GitHub
- URL: https://github.com/aleydon/next14
- Owner: Aleydon
- Created: 2024-09-24T05:45:30.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-30T21:42:25.000Z (about 1 year ago)
- Last Synced: 2025-03-25T07:41:40.746Z (10 months ago)
- Topics: javascript, jest, js, next, next14, nextjs, react, reactjs, testing-library, testing-library-react, testing-library-react-hooks, ts, typescript
- Language: TypeScript
- Homepage:
- Size: 485 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
:earth_americas: Next 14 Template :earth_americas:
## :pushpin: Requirements: :pushpin:
NodeJs: :link: https://nodejs.org/en/
---
#### :arrow_forward: Get Started:
1. Clone this repo
```sh
git clone https://github.com/Aleydon/Next14.git
```
2. Install NPM packages
```sh
npm install or yarn install
```
3. Run this project
```sh
npm run dev or yarn dev
```
---
Template configuration:
- Jest + Testing Library for automated testing. :link: https://jestjs.io/ + https://testing-library.com/
- Storybook for component documentation. :link: https://storybook.js.org/
- Eslint + Prettier for code standardization and formatting. :link: https://eslint.org/ + https://prettier.io/
- Typescript for typing. :link: https://www.typescriptlang.org/
- Tailwind Css for styling components. :link: https://tailwindcss.com/
- HuskyJs for automatically lint your commit messages, code, and run tests upon committing or pushing. :link: https://typicode.github.io/husky/
---
Tests + Storybook:
- How to run tests:
```sh
npm run test or npm run test:watch
```
It has an example of tests with Jest + Testing-Library in _src/app/page.spec.tsx_
```ts
import { render, screen } from '@testing-library/react';
import Page from './page';
describe('Page Component', () => {
it('should get the text hello world', () => {
render();
const hello = screen.getByText('Hello World');
expect(hello).toBeDefined();
});
it('should get the text hello world in the component s heading', () => {
render();
const heading = screen.getByRole('heading', {
name: 'Hello World'
});
expect(heading).toBeInTheDocument();
});
it('must get the link from the page component', () => {
render();
const link = screen.getByRole('link', { name: 'github.com/Aleydon' });
expect(link).toBeDefined();
expect(link).toHaveAttribute('target', '_blank');
expect(link).toHaveAttribute('aria-label', 'github.com/Aleydon');
});
});
```
---
- How to run storybook:
```sh
npm run storybook or yarn storybook
```
also has an example of using Storybook in the Text component in _src/app/components/Text/text.stories.tsx_
```ts
import type { Meta, StoryObj } from '@storybook/react';
import Text, { type TextProps } from '.';
const text: Meta = {
component: Text,
title: 'Components/Text'
};
export default text;
export const Small: StoryObj = {
args: {
size: 'small',
children: 'Small Text'
}
};
export const Medium: StoryObj = {
args: {
size: 'medium',
children: 'Medium Text'
}
};
export const Large: StoryObj = {
args: {
size: 'large',
children: 'Large Text'
}
};
```