This is a Next.js project bootstrapped with create-next-app
.
-
Clone this repository or hit "Use this template" button
git clone git@github.com:pixel-point/nextjs-typescript-tailwind-starter.git
-
Install dependencies
npm install
npm run dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
├── public
├── src
│ ├── components
│ │ ├── pages — React components that are being used specifically on a certain page
│ │ └── shared — React components that are being used across the whole website
│ ├── app
│ ├── svgs — a folder for vector images
│ ├── images — a folder for bitmap images
│ ├── lib
│ ├── types
├── next.config.js — Main configuration file for a Next.js site. Read more about it [here](https://nextjs.org/docs/api-reference/next.config.js/introduction)
└── tailwind.config.js — Main configuration file for Tailwind CSS [Read more about it here](https://tailwindcss.com/docs/configuration)
- Main TypeScript File
- Index File
- Folder with images and icons
- Folder with data
Also, each component may include another component that follows all above listed rules.
component
├── nested-component
│ ├── data
│ │ └── nested-component-lottie-data.json
│ ├── images
│ │ ├── nested-component-image.jpg
│ │ ├── nested-component-inline-svg.inline.svg
│ │ └── nested-component-url-svg.url.svg
│ ├── nested-component.tsx
│ └── index.ts
├── data
│ └── component-lottie-data.json
├── images
│ ├── component-image.jpg
│ ├── component-inline-svg.inline.svg
│ └── component-url-svg.url.svg
├── component.tsx
└── index.ts
ESLint helps find and fix code style issues and force developers to follow same rules. Current configuration is based on eslint:recommended
, next/core-web-vitals
and @typescript-eslint/recommended
rules sets.
Additional commands:
npm run lint
Run it to check the current status of eslint issues across project.
npm run lint:fix
Run it to fix all possible issues.
Prettier helps to format code based on defined rules. Difference between Prettier and ESLint.
Additional commands:
npm run format
Run it to format all files across the project.
Following extensions required to simplify the process of keeping the same code style across the project:
After installation, VS Code will be use settings from the .vscode/settings.json
file and will be fixing and formatting your code automatically on paste and save actions.