create-easy-next13-template-ts v1.1.0

Hello 👋 I'm A Next13 TypeScript Template!

bootstrapped with TailwindCSS and ESLint, configured with PWA and SEO, created by Li Yuxuan

npx create-easy-next13-template-ts@latest

DEV Blog Post 👉🏻: https://dev.to/xmliszt/simplify-your-nextjs-13-app-router-development-with-npx-create-easy-next13-template-tslatest-1l4a

• Hello 👋 I'm A Next13 TypeScript Template!
  • Getting Started
  • Installation
  • Features
  • Remove Search Engine Optimization (SEO)
  • Remove Progressive Web App (PWA)
  • Remove ESLint
  • Remove TailwindCSS

Getting Started

A few things to take notes before you start:

• This is a TypeScript template. JavaScript is currently not supported.
• The template will install the latest NextJS version (Next13), with the "App Router" mode enabled. If you are more familiar with the traditional "Pages Router", feel free to change the example application. (For more details about "App Router" vs "Pages Router", visit NextJS Documentation to find out more!)
• The template will also by default include the followings. Feel free to modify or remove any of them if you don't want to include them in your project. Instructions on how to remove them are documented at the end of this README.
  • Install TailwindCSS
  • Install ESLint
  • Set up PWA
  • Set up SEO

Installation

• simply run npx create-easy-next13-template-ts@latest and follow on screen instructions!

npx create-easy-next13-template-ts@latest

Features

• A TypeScript Next 13 (App Router) template with TailwindCSS and ESLint supported by default.
• Optional UI library Chakra UI, Material UI to be installed.
• Progressive Web App (PWA) enabled (with next-pwa)
• Search Engine Optimization (SEO) is included (with NextJS Metadata)
• Optional third-party libraries such as: React Icons, NextAuth.js, Lodash, Moment.js to be installed.
• Optional Testing frameworks to be installed: Jest, Cypress, Playwright
• Optional markdown files support, with React-Markdown
• Optional linter(s) and formatter(s) to be installed: Stylelint, Prettier
• Husky can be installed for adding git hooks to your project
• MIT License

Remove Search Engine Optimization (SEO)

The project is automatically configured with sample SEO approach. You can find the details in app/layout.tsx, where you see the export const metadata: Metadata = {...} is being defined. If you wish to remove SEO, simply remove the entire metadata block. For more information about metadata in Next13, check out: https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Remove Progressive Web App (PWA)

The project is by default bootstrapped with PWA using next-pwa. If you wish to remove PWA, you can follow the below steps:

1. Go to next.config.js in root directory, remove anything related to PWA, namely withPWA and change module.exports = withPWA(nextConfig); into module.exports = nextConfig;
2. Go to public/ and remove manifest.json
3. Go to app/layout.tsx, (assuming you have SEO enabled), in the metadata block, remove manifest, appleWebApp fields.

Remove ESLint

The project is by default installed with ESLint. If you wish to remove it, simply remove the .eslintrc.json in root directory. You can also remove the lint field in the scripts field in package.json.

Remove TailwindCSS

The project is by default installed with TailwindCSS integration with Next13. If you wish to remove it, follow the below steps:

1. At root directory, remove postcss.config.js and tailwind.config.js
2. In app/globals.css, remove the @tailwind lines at the top, and any lines that start with @apply

Note: once you remove tailwindCSS, all the tailwindCSS syntax in className will not work anymore! You have to remove them or create your own CSS classes.

Feel free to remove / modify any pre-installed packages to suit your own needs!

😈 Happy Hacking!