🚀 Why use this template?

Creating an optimized project from scratch is time-consuming and challenging. I've created this template for me and others to streamline the process of starting new projects and add things along the way.

This template includes Next.js, TypeScript, and Tailwind CSS, along with ESLint commands, prettier configuration, strict ESLint rules, icons component, standards of the GitHub repository, and many more.

🎁 What does this template include?

• It uses the latest version of Next.js v14.1, TypeScript v5.2, and TailwindCSS v3.3.
• It has a strict environment of using npm v10 or higher with .npmrc and node v16 or higher.
• This includes Code_OF_CONDUCT.md, Security.md, MIT LICENSE as standards of a repository.
• This uses prettier as a default code formatter. You can read the prettier configuration and check what files are ignored by prettier in .prettierignore.
• This has strict ESLint rules.
  • You can read the ESLint configurations used here and ignored files in .eslintignore.
  • It warns of unused variables and usage of certain types in TypeScript.
• This also uses advanced TypeScript Configurations like noImplicitAny & strictNullChecks which you can read in tsconfig.
• This has a icon component system using Lucide Icons. You can easily add SVG icons without adding them in a different file.
  • You can import Icons from @/components/icons.tsx and use tailwind as usual.
  • You will have to specify the height and width of the icon.
  • You will have to adjust the viewBox and fill the property as currentColor if you want to specify the color using tailwind.
  • You can also import icons from Lucide and use them as specified above.
• This uses next/font to automatically optimize and load Open_Sans, a custom Google Font. You can view the file in @/lib/fonts.ts.
• This includes lib/utils.ts that uses clsx and tailwind merge to allow the combination of combined classes.
• This includes a plugin that will automatically arrange the classnames in the correct order.
• This also improves accessibility by using the eslint-plugin-jsx-a11y plugin to help catch accessibility issues early.
  • For example, this plugin warns if you have images without alt text, use the aria-* and role attributes incorrectly, and more.
• See below for the commands that you can use and what it does.

💻 What are the commands that you can use?

These are the commands that you can use and what it does in brief.

• npm run format - Formats code files according to defined formatting rules using Prettier, improving code readability and consistency.
• npm run lint:fix - Automatically fixes any fixable issues identified during linting, enhancing code quality and consistency.
• npm run lint - Analyzes the codebase for potential issues and inconsistencies using ESLint, providing feedback on code quality.
• npm run preview - Builds the Next.js application and starts a server, allowing for previewing of the production build locally before deployment.
• npm run type-check - Checks TypeScript files for type errors without emitting any compiled code, ensuring type safety in the codebase.
• npm run format:write: Formats specific files (located in the app, lib, and components directories) using Prettier, writes changes to disk, and utilizes cache
• npm run format:check: Checks specified files for formatting issues without modifying them, ensuring code conformity to formatting standards, utilizes cache

✅ Guidelines to run web app locally

This is a Next.js project bootstrapped with create-next-app.

Use these commands to work on this locally.

# to install dependencies 
npm install

# to run the server
npm run dev

Open http://localhost:3000 with your browser to see the application.

📂 File Structure

A quick look at the structure of the template. This doesn't cover config and other files in the root dir.

.
└── components
    └───icons.tsx
└── lib
    └───fonts.ts
    └───utils.ts
└── src/app
    └───layout.tsx
    └───page.tsx
└── public
    └───next.svg
    └───vercel.svg
└── styles
    └──globals.css

Thanks for using the template

Please 🌟 this template! It really helps others to find this!!

Please create an issue for suggestions and contact me, Anmol Baranwal if you have any feedback or suggestions.