CHANGELOG.md

ts-nextjs-tailwind-starter changelog

This changelog is manually generated and not accurate with the package.json, only to show the changes since the last release.

0.5.3 - 2022-02-27

New Features

• Shimmer for NextImage and Skeleton

  Addition of shimmer & blur placeholder for NextImage, and new Skeleton Component with shimmer effect.

  CleanShot.2022-02-27.at.11.02.05.mp4

• Support for SVGR

  You can directly import SVG like

  import Vercel from '~/svg/Vercel.svg';
  
  <Vercel className='text-5xl' />

• Public Folder Path Mapping

  Easily access public folder with ~/ prefix.

• Tailwind CSS Prettier Sorter

  ts-nextjs-tailwind-starter now use first-party plugin prettier-plugin-tailwindcss

Improvements & Bug Fixes

• Layout Declared Twice

  Fix issue where adding elements to Layout ends up rendering them twice

• ESLint Curly Brace Rule

  New autofixable rule

  props={'hi'}
  
  will become
  
  props='hi'

0.5.2 - 2021-12-30

New Features

• New Component: PrimaryLink

  Add a link component with accent color on top of UnstyledLink.

Improvements & Bug Fixes

• Unused Import ESlint Autofix

  Unused import will automatically be removed by the ESlint autofix.

• Renamed CustomLink to UnderlineLink

  This is to compensate the new PrimaryLink component

• Primary Button & ButtonLink Shade

  The shade of the button is now using the 500 instead of 400.

0.5.1 - 2021-12-26

New Features

• New Snippets Wrap: clsx and fragment <></>

  You can select text then wrap it with clsx or React.Fragment shorthand.

  CleanShot.2021-12-26.at.14.28.07.mp4

0.5.0 - 2021-12-21

New Features

• Expansion Pack

  You can easily add expansion such as React Hook Form + Components, Storybook, and more just using a single command line.

  CleanShot.2021-12-04.at.18.54.07-trimmed.mp4

  Check out the expansion pack repository for the commands

Improvements & Bug Fixes

• Can't Use Layout Fill on NextImage

  Using layout fill will make the width and height optional

• Vertically center Button & ButtonLink

  Adds items-center to make the button vertically centered

0.4.1 - 2021-12-12

New Features

• Tailwind CSS v3

  The color palette configuration is also updated accordingly.

0.4.0 - 2021-12-02

New Features

• Button & ButtonLink Variants

  • New Variant: Outline and Ghost, you can also add isDarkBg prop if you are using these variants with dark background.
  • Animated Underline style on Primary, Dark, Light is removed
  • Added ring-primary-500 on focus-visible

  

• ArrowLink

  Adds an animated arrow, this component is Polymorphic, the default element is CustomLink, you can extend it with as prop.

  <ArrowLink
    as={ButtonLink}
    variant='light'
    href='/'
  >
    Register now
  </ArrowLink>

  

• Change default theme to white

Improvements & Bug Fixes

• Split Next.js Link Props Type

  Now, to add props to Next.js <Link> component, you can use nextLinkProps.

  <UnstyledLink 
    href='/'
    nextLinkProps={{
      shallow: true,
    }}
  >
    Link
  </UnstyledLink>

  The rest of <a> props can be directly added as a prop.

• Add Motion Safe to Animations

  All components animation respect user preference about motion.

0.3.0 - 2021-12-01

New Features

• Create Branch & Auto Resolve Issue Actions

  Auto Create Branch	Auto Resolve

  You have to install the app for your organization/account/repository from the GitHub Marketplace for this to work.

  The branch will be created on assign with format i${number}-${issue_title_lowercase}.

• Custom Tailwind CSS Class Sorter

  Classes are sorted using prettier-plugin-sort-class-names with custom class order on this file and custom variant order on prettierrc

  With this plugin, we can now safely check the order of the classes using the preconfigured lint action.

0.2.0 - 2021-11-10

New Features

• Jest

  Jest is configured and will be run every push on Github Actions

• Lint Github Action

  1. ESLint - will fail if there are any warning and error.
  2. Type Check - will fail on tsc error.
  3. Prettier Check - will fail if there are any formatting error.
  4. Test - will fail if there are any test failure.

0.1.0

New Features

• Installed Packages

  1. clsx, utility for constructing className strings conditionally.
  2. react-icons, svg react icons of popular icon packs.

• UnstyledLink Component

  Used as a component for Next.js Link. Will render out Next/Link if the href started with / or #, else will render an a tag with target='_blank'. Also add a cursor style for outside links

• CustomLink Component

  

• Absolute Import

  You can import without using relative path

  import Nav from '../../../components/Nav';
  
  simplified to
  
  import Nav from '@/components/Nav';

• Seo Component

  Configure the default in src/components/Seo.tsx. If you want to use the default, just add <Seo /> on top of your page.

  You can also customize it per page by overriding the title, description as props

  <Seo title='Next.js Tailwind Starter' description='your description' />

  or if you want to still keep the title like %s | Next.js Tailwind Starter, you can use templateTitle props.

• Custom 404 Page

• Workspace Snippets

Snippets such as React import, useState, useEffect, React Component. View more

• Husky, Prettier, Lint, and Commitlint Configured

  3 Husky hooks including:

  1. pre-commit, running next lint and format the code using prettier
  2. commit-msg, running commitlint to ensure the use of Conventional Commit for commit messages
  3. post-merge, running yarn every git pull or after merge to ensure all new packages are installed and ready to go

• Default Favicon Declaration

  Use Favicon Generator and then overwrite the files in /public/favicon

• Default Tailwind CSS Base Styles

  There are default styles for responsive heading sizes, and .layout to support a max-width for larger screen size. Find more about it on my blog post

• Open Graph Generator

  Open Graph is generated using og.thcl.dev, but please fork and self-host if your website is going to have a lot of traffic.

  Check out the repository to see the API parameters.

• Preloaded & Self Hosted Inter Fonts

  Inter fonts is a variable fonts that is self hosted and preloaded.

Snippets

This starter is equipped with workspace-snippets, it is encouraged to use it, especially the np and rc

Next.js Page

File inside src/pages will be the webpage route, there are 2 things that need to be added in Next.js page:

1. Seo component
2. Layout class to give constraint to viewport width. Read more about layout class.

Snippets: np

import * as React from 'react';
import Seo from '@/components/Seo';
export default function TestPage() {
  return (
    <>
      <Seo templateTitle='Test' />
      <main>
        <section className=''>
          <div className='layout'></div>
        </section>
      </main>
    </>
  );
}

React Components

To make a new component, It is encouraged to use export default function. Because when we need to rename it, we only need to do it once.

Snippets: rc

import * as React from 'react';
export default function Component() {
  return <div></div>;
}

Import React

Snippets: ir

import * as React from 'react';

Import Next Image

Snippets: imimg

import Image from 'next/image';

Import Next Link

Snippets: iml

import Link from 'next/link';

useState Hook

Snippets: us

const [state, setState] = React.useState(initialState);

useEffect Hook

Snippets: uf

React.useEffect(() => {}, []);

useReducer Hook

Snippets: ur

const [state, dispatch] = React.useReducer(someReducer, {});

useRef Hook

Snippets: urf

const someRef = React.useRef();

Region Comment

It is really useful when we need to group code. It is also collapsible in VSCode

Snippets: reg

//#region  //*============== FORM SUBMIT
//#endregion  //*============== FORM SUBMIT

You should also use Better Comments extension.