Skip to content

A convenient TypeScript template for Next13 development, integrated with TailwindCSS, UI Libraries, linters and formatters, PWA, SEO, and many more features! Written in Typescript.

License

Notifications You must be signed in to change notification settings

xmliszt/easy-next

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hello 👋 I'm A Next13 TypeScript Template!

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

npx easy-next@latest

What's New?

v1.2.0


Poster Demo

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 easy-next@latest and follow on screen instructions!
npx easy-next@latest

Features

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!

Contribute

To contribute, simply fork the project, npm i and then node index.js to run development version.

You can find issues to work on in the "Issues" tab in GitHub. Or you can create your own issue and work on your improvements / suggestions.

About

A convenient TypeScript template for Next13 development, integrated with TailwindCSS, UI Libraries, linters and formatters, PWA, SEO, and many more features! Written in Typescript.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published