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.
- It uses the latest version of Next.js
v14.1
, TypeScriptv5.2
, and TailwindCSSv3.3
. - It has a strict environment of using npm
v10
or higher with.npmrc
and nodev16
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.
- You can read the
- This also uses advanced TypeScript Configurations like
noImplicitAny
&strictNullChecks
which you can read intsconfig
. - 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.
- You can import
- 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 usesclsx
andtailwind 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 thearia-*
androle
attributes incorrectly, and more.
- For example, this plugin warns if you have images without
- See below for the commands that you can use and what it does.
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 theapp
,lib
, andcomponents
directories) using Prettier, writes changes to disk, and utilizes cachenpm run format:check
: Checks specified files for formatting issues without modifying them, ensuring code conformity to formatting standards, utilizes cache
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.
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
Please create an issue for suggestions and contact me, Anmol Baranwal if you have any feedback or suggestions.