Next.js React.js TypeScript Tailwind CSS Jest Starter

A starter template for building web applications using Next.js with TypeScript, Tailwind CSS, and Jest for testing.

Getting Started

Follow these steps to get this starter template up and running on your local machine.

Prerequisites

Make sure you have Node.js and npm (or Yarn) installed on your computer.

Installation

1. Clone this repository to your local machine:

   git clone https://github.com/zied-snoussi/nextjs13-reactjs-typescript-tailwindcss-jest-starter-frontend.git

2. Change into the project directory:

   cd nextjs13-reactjs-typescript-tailwindcss-jest-starter-frontend

3. Install the project dependencies:

   If you're using npm:

   npm install

   If you're using Yarn:

   yarn

Development

To start the development server, run the following command:

npm run dev

or

yarn dev

The application will be available at http://localhost:3000.

Building

To build the production-ready version of the application, use the following command:

npm run build

or

yarn build

Running in Production Mode

After building the application, you can start it in production mode with the following command:

npm start

or

yarn start

Linting

To run ESLint for code linting, use the following command:

npm run lint

or

yarn lint

Testing

Jest is used for testing. You can run the tests with:

npm test

or

yarn test

For watching file changes during development, use:

npm run test-watch

or

yarn test-watch

Dependencies

• @types/node - TypeScript definitions for Node.js.
• @types/react - TypeScript definitions for React.
• @types/react-dom - TypeScript definitions for ReactDOM.
• autoprefixer - A PostCSS plugin to parse CSS and add vendor prefixes.
• eslint - A pluggable and configurable linter tool for identifying and fixing problems in JavaScript code.
• eslint-config-next - ESLint configuration for Next.js projects.
• next - The React framework for production.
• postcss - A tool for transforming styles with JS plugins.
• react - A JavaScript library for building user interfaces.
• react-dom - DOM-specific methods for React.
• tailwindcss - A utility-first CSS framework for rapidly building custom designs.
• typescript - A typed superset of JavaScript that compiles to plain JavaScript.

Dev Dependencies

• @testing-library/jest-dom - Custom Jest matchers for asserting on DOM elements.
• @testing-library/react - Simple and complete React DOM testing utilities.
• @testing-library/user-event - Fire events as if a real user were interacting with your app.
• eslint-plugin-testing-library - ESLint plugin for testing-library.
• jest - A JavaScript testing framework.
• jest-environment-jsdom - Jest environment for the JSDOM.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• This starter template is based on Next.js, TypeScript, Tailwind CSS, and Jest.
• Feel free to customize it to fit your project's needs.

Happy coding!