theodorusclarence / ts-nextjs-tailwind-starter

🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features

Next.js + Tailwind CSS + TypeScript Starter and Boilerplate

🔋 ts-nextjs-tailwind-starter

Next.js + Tailwind CSS + TypeScript starter packed with useful development features.

Made by Theodorus Clarence

Features

This repository is 🔋 battery packed with:

• ⚡️ Next.js 14 with App Router
• ⚛️ React 18
• ✨ TypeScript
• 💨 Tailwind CSS 3 — Configured with CSS Variables to extend the primary color
• 💎 Pre-built Components — Components that will automatically adapt with your brand color, check here for the demo
• 🃏 Jest — Configured for unit testing
• 📈 Absolute Import and Path Alias — Import components using @/ prefix
• 📏 ESLint — Find and fix problems in your code, also will auto sort your imports
• 💖 Prettier — Format your code consistently
• 🐶 Husky & Lint Staged — Run scripts on your staged files before they are committed
• 🤖 Conventional Commit Lint — Make sure you & your teammates follow conventional commit
• ⏰ Release Please — Generate your changelog by activating the release-please workflow
• 👷 Github Actions — Lint your code on PR
• 🚘 Automatic Branch and Issue Autolink — Branch will be automatically created on issue assign, and auto linked on PR
• 🔥 Snippets — A collection of useful snippets
• 👀 Open Graph Helper Function — Awesome open graph generated using og, fork it and deploy!
• 🗺 Site Map — Automatically generate sitemap.xml
• 📦 Expansion Pack — Easily install common libraries, additional components, and configs.

See the 👉 feature details and changelog 👈 for more.

You can also check all of the details and demos on my blog post:

• One-stop Starter to Maximize Efficiency on Next.js & Tailwind CSS Projects

Getting Started

1. Clone this template using one of the three ways

1. Use this repository as template

   Disclosure: by using this repository as a template, there will be an attribution on your repository.

   I'll appreciate if you do, so this template can be known by others too 😄

   

2. Using create-next-app

   pnpm create next-app  -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm

   If you still want to use pages directory (is not actively maintained) you can use this command

   npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/tree/pages-directory project-name

3. Using degit

   npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME

4. Deploy to Vercel

   

2. Install dependencies

It is encouraged to use pnpm so the husky hooks can work properly.

pnpm install

3. Run the development server

You can start the server using this command:

pnpm dev

Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying src/pages/index.tsx.

4. Change defaults

There are some things you need to change including title, urls, favicons, etc.

Find all comments with !STARTERCONF, then follow the guide.

Don't forget to change the package name in package.json

5. Commit Message Convention

This starter is using conventional commits, it is mandatory to use it to commit changes.

Projects using ts-nextjs-tailwind-starter

• theodorusclarence.com (Source)
• Notiolink (Source)
• NextJs + Materia UI + Typescript

Are you using this starter? Please add your page (and repo) to the end of the list via a Pull Request. 😃

Expansion Pack 📦

This starter is now equipped with an 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

App Router Update

Due to App Router update, the expansion pack is currently outdated. It will be updated in the future. You can still use them by copy and pasting the files.

ts-nextjs-tailwind-starter's Issues

Include dark mode configuration

I would first like to thank you for making this repository available, it helped me a lot and facilitated several environment configuration activities.

I would like to suggest setting dark mode in the application context, it would help a lot to use Tailwind resources in themes and components

• Below is an example of Next.js setting dark mode with useEffect:

• An example of toogle button and output code:

Once again, thank you for everything.

issue changing site title

I'm attempting to change the title of an instance of this site, but not having luck when changing the default values in Seo.tsx

Could you please help guide me in the right direction? I think I must have missed a step somewhere. Thanks!

use headwind & rustywind

Probably headwind for development

then proofed with rustywind to cover clsx bug?

there will be some class clashes everytime tho.

SVGR CLI

Automatically generate svg to @/src/svg/

tailwind css eslint

Include redux

title

add primary link & remove unused import eslint

setting theme to white by default

ts-nextjs-tailwind-starter/src/components/Seo.tsx

Line 89 in 10d639b

<meta name='theme-color' content='#ffffff' />

this line <meta name='theme-color' content='#ffffff' /> is setting the theme to white which causes status bar and behind page bg on iPhone to be white which was hard to debug I suggest removing it or adding a comment.

upgrade to tailwind v3

When I use "yarn install" I get 'husky' is not recognized as an internal or external command

info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
PS E:\ArtHaven\ArtMaven\artmavenreal> yarn install
yarn install v1.22.4
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
success Already up-to-date.
$ husky install
'husky' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

tried npm install

[email protected] prepare
husky install

'husky' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code 1
npm ERR! path E:\ArtHaven\ArtMaven\artmavenreal
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c husky install

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lesli\AppData\Local\npm-cache\_logs\2023-04-17T16_31_18_966Z-debug-0.log
PS E:\ArtHaven\ArtMaven\artmavenreal>              

Type error: 'Component' cannot be used as a JSX component.

node v18.16.0
npm 9.8.0
npx Next.js v13.4.4

$ npm run build

> [email protected] build
> next build

- info Linting and checking validity of types ...Failed to compile.

./src/pages/_app.tsx:13:11
Type error: 'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<any, any, any> | null' is not a valid JSX element.
    Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/shmuelm/node_modules/@types/react/ts5.0/index").ReactNode'.
            Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
              Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

  11 |
  12 | function MyApp({ Component, pageProps }: AppProps) {
> 13 |   return <Component {...pageProps} />;
     |           ^
  14 | }
  15 |
  16 | export default MyApp;

Step to recreate:

npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter project-name

Need to install the following packages:
  [email protected]
Ok to proceed? (y)

cd  project-name
npm install
npm run build

When I put header in Layout why does it show up rendered twice?

import * as React from 'react';
import Header from "@/components/layout/Header"

export default function Layout({ children }: { children: React.ReactNode }) {
  // Put Header or Footer Here
  return <><Header/>{children}</>;
}

sw.js?

While running this locally, Next.js keeps trying to a build a page for sw.js, which returns no props and all our pages are blank. Do you know what this is? I see this is something about service workers? How do we turn this off?

standard-version is deprecated

Hi!!!
Nice work here.
I'm just reviewing the dependencies and found this:
https://github.com/conventional-changelog/standard-version
standard-version is deprecated. If you're a GitHub user, I recommend [release-please](https://github.com/googleapis/release-please) as an alternative. I encourage folks to fork this repository and, if a fork gets popular, I will link to it in this README.
Maybe we could use the recommended library instead.
Thanks!!

remove animated underline from buttons

Most of the time I remove it anyway, not suitable for most projects, going to change it into different hover color

Tooltip not working in Input.tsx

Hi Theodorus,

I am trying to add a tooltip for icon in the Input component, the library used is @tippyjs/react

import Tippy from '@tippyjs/react';
import clsx from 'clsx';
import * as React from 'react';
import { RegisterOptions, useFormContext } from 'react-hook-form';
import { HiExclamationCircle } from 'react-icons/hi';

export type InputProps = {
  /** Input label */
  label: string;
  /**
   * id to be initialized with React Hook Form,
   * must be the same with the pre-defined types.
   */
  id: string;
  /** Input placeholder */
  placeholder?: string;
  /** Small text below input, useful for additional information */
  helperText?: string;
  /**
   * Input type
   * @example text, email, password
   */
  type?: React.HTMLInputTypeAttribute;
  /** Disables the input and shows defaultValue (can be set from React Hook Form) */
  readOnly?: boolean;
  /** Disable error style (not disabling error validation) */
  hideError?: boolean;
  /** Manual validation using RHF, it is encouraged to use yup resolver instead */
  validation?: RegisterOptions;
} & React.ComponentPropsWithoutRef<'input'>;

export default function Input({
  label,
  placeholder = '',
  helperText,
  id,
  type = 'text',
  readOnly = false,
  hideError = false,
  validation,
  ...rest
}: InputProps) {
  const {
    register,
    formState: { errors },
  } = useFormContext();



  return (
    <div>
      <label htmlFor={id} className='block text-sm font-normal text-gray-700'>
        {label}
      </label>
      <div className='relative mt-1'>
        <input
          {...register(id, validation)}
          {...rest}
          type={type}
          name={id}
          id={id}
          readOnly={readOnly}
          className={clsx(
            readOnly
              ? 'bg-gray-100 focus:ring-0 cursor-not-allowed border-gray-300 focus:border-gray-300'
              : errors[id]
              ? 'focus:ring-red-500 border-red-500 focus:border-red-500'
              : 'focus:ring-primary-500 border-gray-300 focus:border-primary-500',
            'block w-full rounded-md shadow-sm'
          )}
          placeholder={placeholder}
          aria-describedby={id}
        />

        {!hideError && errors[id] && (
          
          <div  className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
              <Tippy content="Hello">
                <HiExclamationCircle  className='text-xl text-red-500' />
              </Tippy>
          </div>
          
        )}
      </div>
      <div className='mt-1'>
        {/* {helperText && <p className='text-xs text-red-500'>{helperText}</p>} */}
        {!hideError && errors[id] && (
          // <span className='text-sm text-red-500'>{errors[id].message}</span>
          <span className='text-sm text-red-500'>error</span>
        )}
      </div>
    </div>
  );
}

is this the right way to use tippy?

        {!hideError && errors[id] && (
          <div  className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
              <Tippy content="Hello">
                <HiExclamationCircle  className='text-xl text-red-500' />
              </Tippy>
          </div>
        )}

Customize Color doesn't work

in globals.css

:root {
  /* #region  /**=========== Primary Color =========== */
  /* !STARTERCONF Customize these variable, copy and paste from /styles/colors.css for list of colors */
  /* list of colors preview https://tailwindcss.com/docs/customizing-colors */
    --tw-color-primary-50: 240 249 255;
    --tw-color-primary-100: 224 242 254;
    --tw-color-primary-200: 186 230 253;
    --tw-color-primary-300: 125 211 252;
    --tw-color-primary-400: 56 189 248;
    --tw-color-primary-500: 14 165 233;
    --tw-color-primary-600: 2 132 199;
    --tw-color-primary-700: 3 105 161;
    --tw-color-primary-800: 7 89 133;
    --tw-color-primary-900: 12 74 110;
    --color-primary-50: rgb(var(--tw-color-primary-50)); /* #f0f9ff */
    --color-primary-100: rgb(var(--tw-color-primary-100)); /* #e0f2fe */
    --color-primary-200: rgb(var(--tw-color-primary-200)); /* #bae6fd */
    --color-primary-300: rgb(var(--tw-color-primary-300)); /* #7dd3fc */
    --color-primary-400: rgb(var(--tw-color-primary-400)); /* #38bdf8 */
    --color-primary-500: rgb(var(--tw-color-primary-500)); /* #0ea5e9 */
    --color-primary-600: rgb(var(--tw-color-primary-600)); /* #0284c7 */
    --color-primary-700: rgb(var(--tw-color-primary-700)); /* #0369a1 */
    --color-primary-800: rgb(var(--tw-color-primary-800)); /* #075985 */
    --color-primary-900: rgb(var(--tw-color-primary-900)); /* #0c4a6e */
  /* #endregion  /**======== Primary Color =========== */

}

if I add a color from colors.css, it report a error.

for example :

:root {
  /* #region  /**=========== Primary Color =========== */
  /* !STARTERCONF Customize these variable, copy and paste from /styles/colors.css for list of colors */
  /* list of colors preview https://tailwindcss.com/docs/customizing-colors */
    --tw-color-primary-50: 240 249 255;
    --tw-color-primary-100: 224 242 254;
    --tw-color-primary-200: 186 230 253;
    --tw-color-primary-300: 125 211 252;
    --tw-color-primary-400: 56 189 248;
    --tw-color-primary-500: 14 165 233;
    --tw-color-primary-600: 2 132 199;
    --tw-color-primary-700: 3 105 161;
    --tw-color-primary-800: 7 89 133;
    --tw-color-primary-900: 12 74 110;
    --color-primary-50: rgb(var(--tw-color-primary-50)); /* #f0f9ff */
    --color-primary-100: rgb(var(--tw-color-primary-100)); /* #e0f2fe */
    --color-primary-200: rgb(var(--tw-color-primary-200)); /* #bae6fd */
    --color-primary-300: rgb(var(--tw-color-primary-300)); /* #7dd3fc */
    --color-primary-400: rgb(var(--tw-color-primary-400)); /* #38bdf8 */
    --color-primary-500: rgb(var(--tw-color-primary-500)); /* #0ea5e9 */
    --color-primary-600: rgb(var(--tw-color-primary-600)); /* #0284c7 */
    --color-primary-700: rgb(var(--tw-color-primary-700)); /* #0369a1 */
    --color-primary-800: rgb(var(--tw-color-primary-800)); /* #075985 */
    --color-primary-900: rgb(var(--tw-color-primary-900)); /* #0c4a6e */
  /* #endregion  /**======== Primary Color =========== */

  .rose {
    --tw-color-primary-50: 255 241 242;
    --tw-color-primary-100: 255 228 230;
    --tw-color-primary-200: 254 205 211;
    --tw-color-primary-300: 253 164 175;
    --tw-color-primary-400: 251 113 133;
    --tw-color-primary-500: 244 63 94;
    --tw-color-primary-600: 225 29 72;
    --tw-color-primary-700: 190 18 60;
    --tw-color-primary-800: 159 18 57;
    --tw-color-primary-900: 136 19 55;
    --color-primary-50: rgb(var(--tw-color-primary-50)); /* #fff1f2 */
    --color-primary-100: rgb(var(--tw-color-primary-100)); /* #ffe4e6 */
    --color-primary-200: rgb(var(--tw-color-primary-200)); /* #fecdd3 */
    --color-primary-300: rgb(var(--tw-color-primary-300)); /* #fda4af */
    --color-primary-400: rgb(var(--tw-color-primary-400)); /* #fb7185 */
    --color-primary-500: rgb(var(--tw-color-primary-500)); /* #f43f5e */
    --color-primary-600: rgb(var(--tw-color-primary-600)); /* #e11d48 */
    --color-primary-700: rgb(var(--tw-color-primary-700)); /* #be123c */
    --color-primary-800: rgb(var(--tw-color-primary-800)); /* #9f1239 */
    --color-primary-900: rgb(var(--tw-color-primary-900)); /* #881337 */
  }

}

Error Message:

(31:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting`

use first-party jest config

favicon.ico not found

console says GET http://localhost:3000/favicon.ico 404 (Not Found)
(i didn't edit anythings in src > components > Seo.tsx or public > favicon)

The problem is when i Link to other pages, console says it visiting 404 pages several times.

404.tsx

import * as React from 'react';
import { RiAlarmWarningFill } from 'react-icons/ri';

import Layout from '@/components/layout/Layout';
import ArrowLink from '@/components/links/ArrowLink';
import Seo from '@/components/Seo';

export default function NotFoundPage() {
  return (
    <Layout title='404'>
      <Seo templateTitle='Not Found' />
...

Layout.tsx

import * as React from 'react';

import Header from './Header';

export default function Layout({
  children,
  title,
  prevUrl,
}: {
  children: React.ReactNode;
  title: string;
  prevUrl?: string;
}) {
  return (
    <>
      <Header title={title} prevUrl={prevUrl} />
      <section className='min-h-full'>{children}</section>
...

Header.tsx

export default function Header({
  title,
  prevUrl,
}: {
  title: string;
  prevUrl?: string;
}) {
console.log(title, prevUrl)
...

When i navigate to other pages console says like below.

Problem while running npm install

Hello! First of all, thank you very mucho for this awesome starter!
I keep getting this problem while running npm install,
What coul it be?

[Epic] Change all components to forward ref

• #78
• Links

SVGR Webpack to SWC

When upgraded to next 13 with app directory, SVGR webpack config needs to be migrated to SWC

vercel/next.js#33161 (comment)

[RFC] Expansion Pack

With the expansion pack, we can install dependencies and all of the configs just by a bash command.

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

It will be managed on a separate repository https://github.com/theodorusclarence/expansion-pack

Roadmap

• React Hook Form + Form Input Components
• Storybook
• Cypress
• Authentication with Zustand
• Toast with SWR
• Dialog Manager with Zustand

That is the roadmap that I got in mind with some example repo I have made. If you have something you want to add and contribute, comment below!

font-display should not be `optional` by default

I think it's very questionable to default to optionally displaying the fonts by setting font-display to optional in the @font-face in globals.css. I know that only Inter is set to optional, but devs often copy/paste the whole @font-face that's in the template when importing their own fonts, trusting it will work for them, and the font-display property comes along with it.

You really would be required to give zero fucks about the design of your app/site to be ok with not loading your fonts to save the tiny sliver of time it takes to load them. Also, if you are working with a designer, setting the fonts to optional is just downright disrepectful, it's like you are saying "I know you problably carefully picked out these fonts for this design, but I don't care and I'm going to optionally load them anyways."

The default for the font-display value should not be optional. Maybe block? Or, maybe keep it s optional but add a helpful comment?

Layout Component isLandscape hook to children

Hi Theodorus,

I am trying to pass a isLandscape hook to children, but got stuck. here is what I have wrote

// Layout.tsx

import clsx from 'clsx';
import * as React from 'react';
import { useMediaQuery } from 'react-responsive';

import Footer from '@/components/layout/Footer';
import Header from '@/components/layout/Header';


const defaultLayout = {
  switch: false,
};

type LayoutProps = {
  templateTitle?: string;
  children: React.ReactNode;
} & Partial<typeof defaultLayout>;

export default function Layout(props: LayoutProps) {
  const m = {
    ...defaultLayout,
    ...props,
  };

const isLandscape = useMediaQuery({ query: '(orientation: landscape)' });

return (
       <div>
               <Header landscape={isLandscape}/>
               {m.children}
               <Footer landscape={isLandscape}/>
      </div>
  );
}

How can I pass the isLandscape hook to children?

changelog

Next.js 13 App Directory

Hi!

Due to the app directory is still in beta, I won't migrate the starter. I will immediately migrate it after the appDir is stable and out of beta 👍. The same goes for next-font.

Otherwise, the new Image and Link component is already migrated.

Thanks for using this starter!

implement shimmer

reference: https://github.com/rizqitsani/next-chakra-ts-starter

jj

Error yarn not recognize in husky

First time using husky, when use Conventional Commit giving error something like this :

Yarn Version

1.22.11

Buttons

Can't reach to 404 pages automatically.

Issue

When user put wrong URL, pages doesnt go 404 pages (neither basic 404 pages of Nex.js) automatically.

when go 404 pages manually

wrong url doesnt show 404 pages

Tried

Local : delete .next folder > yarn build > yarn start
Server : Deploy on AWS / Deploy on vercel

Code

404.tsx

[Feature Request] Internationalization

• Adding internalization be set up by default

Generic AppProps

Hi, thanks for the awesome template

I just encountered this little update to the AppProps in the _app.tsx file

Basically AppProps is now generic and you can pass your custom props to it

Like here when using next-auth

import { Session } from 'next-auth/core/types';
import { SessionProvider } from 'next-auth/react';
interface CustomPageProps {
  session: Session;
}
function MyApp({ Component, pageProps }: AppProps<CustomPageProps>) {
  return (
      <SessionProvider session={pageProps.session} refetchInterval={0}>
        <Component {...pageProps} />
      </SessionProvider>
  );
}

I thought you might want to include it

Cheers

Layout component not set properly

here you tell me to put header or footer

`import * as React from 'react';

export default function Layout({ children }: { children: React.ReactNode }) {
// Put Header or Footer Here
return <>{children}</>;
}`

but if I do this will render 2 layout

I think you should remove Layout from the Pages

export default function HomePage() {
  return (
    <Layout>
      {/* <Seo templateTitle='Home' /> */}
      <Seo />

      <main>
               .......
    </main>
  </layout>

Add support for SVGR

suggestions from @naufaldi

resources:

• https://react-svgr.com/docs/next/

yarn lock file

Recently started having an issue: When i create a new project i get the following error when running yarn:

Invalid value type 1580:0 in /Users/{user}/projects/{project-name}/yarn.lock

If i delete the yarn.lock file and run yarn, issue is resolved.

why to put react and nextjs crap when only html is needed?

why?

support question: Commiting to Git takes a really long time

Whenever we commit to GIT locally using this repo, the commit takes a really, really long time, say 2 minutes. I believe this has something to do with husky, but I'm not sure, as I don't understand husky at all or what other pre-commit checks are done here. Removing husky from the package.json didn't seem to help either. Anyway, any idea what we can do to speed up the commits?

NextImage component not working properly

I think the NextImage component not properly optimizing images because next/image has been set to layout='responsive'. If I look in the components.tsx page there is a usage example, but when the image is loaded it is not actually optimized

produced image URL: https://tsnext-tw.thcl.dev/_next/image?url=%2Ffavicon%2Fapple-icon-180x180.png&w=1920&q=75

it should be w=180 but because layout='responsive' it uses screen width/parent container size as image width which is w=1920 in my case. I think just leaving it as default layout or removing the layout prop and fixed image size will be working fine

Getting errors in tsconfig.json file

I'm getting this error whenever I try to add Tailwindcss to my Nextjs project initiated with "create-next-app --typescript".
Therefore I wanted to try your template but now having the exact same issue.

I have tried installing types for 'accepts' using "yarn add @types/accepts" but then it shows the same error for "body-parser" and keeps going on and on and telling me to add types for different packages which are unknown to me.

Do you know why is this happening?

Resize Cursor on Link & Button

Just wanted to let you know that the cursor on https://tsnext-tw.thcl.dev/components changes to the resize cursor, instead of pointer when hovering above a Link or Button component.

ts-nextjs-tailwind-starter/src/components/links/UnstyledLink.tsx

Line 40 in 5c06f90

className={clsx(className, 'cursor-[ne-resize]')}

This confused me a little bit when checking out the demo, since the resize cursor indicated that you could resize the element. I would change this behaviour.

[Suggested Change / Recommendation] Change absolute import path Alias

Hello Theodor,

I first would like to thank you for the work and effort that you have poured into this project!

Next, I would like to propose a minor change to the approach that you have taken towards the absolute import Aliases. Even though I understand the potential reasons behind your choice, I still think that a less opinionated approach would be better appreciated by the community. Therefore, I will be sending a pull request towards you. In it, I'll be making absolute imports simply absolute (i.e. instead of @/components/something we will have simply components/something).

If you see the change going well with your vision for this boilerplate then you may accept it, else just close the PR nothing personal 😃

Have a nice one !

add clsxm prettier

SVG type

Hello!
I was trying to first commit and ran into this issue during Typecheck Github job was being checked.
Locally I had ran yarn typecheck and it was not throwing any error.
I'm not sure how I can fix that error without modifying the next.config file.
Any suggestions on that?

thanks in advance!

(as it's a public repo, https://github.com/matheusdamiao/mcd-site/actions/runs/6568072475)

Run yarn typecheck
yarn run v1.22.19

$ tsc --noEmit --incremental false

Error: src/app/page.tsx(1[6](https://github.com/matheusdamiao/mcd-site/actions/runs/6568072475/job/17841913484#step:6:7),18): error TS230[7](https://github.com/matheusdamiao/mcd-site/actions/runs/6568072475/job/17841913484#step:6:8): Cannot find module '~/svg/Logo.svg' or its corresponding type declarations.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 2.

Cannot use prettier-plugin-organize-imports

https://www.npmjs.com/package/prettier-plugin-organize-imports
After yarn add -D prettier-plugin-organize-imports, It's not work.

Next 13

layout not used in _app

What happened to the SEO component?

Hi, I understand that there was some migration to new a standard with changes from pages to app, etc.

There used to be an Seo component. What happened to it? Is it no longer appropriate for the new standard? Can I just use it as it used to be or would it no longer work?

What I am talking about:
 https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/blob/pages-directory/src/components/Seo.tsx

Local fonts are not loading when deoploying

Works perfectly locally but when pushing to vercel the custom fonts are not being used