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

Overview

🔋 ts-nextjs-tailwind-starter

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

Made by Theodorus Clarence

CodeFactor Maintainability Rating Bugs GitHub Repo stars

Depfu Last Update

Features

This repository is 🔋 battery packed with:

  • ⚡️ Next.js 12
  • ⚛️ 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
  • 👀 Default Open Graph — 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:

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 😄

    Use as template

  2. Using create-next-app

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

    npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME
  4. Deploy to Vercel

    Deploy with Vercel

2. Install dependencies

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

yarn install

3. Run the development server

You can start the server using this command:

yarn 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

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

Comments
  • fix: next-sitemap won't run on windows

    fix: next-sitemap won't run on windows

    An unexpected error occurred: "Potentially dangerous call to "next-sitemap" issue: https://github.com/iamvishnusankar/next-sitemap/issues/243

    opened by BESHOI 13
  • Customize Color doesn't work

    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`
    
    opened by jerrygzy 8
  • fix: change lint scripts to only lint src folder

    fix: change lint scripts to only lint src folder

    Noticed an issue on some of the linting Github Actions workflows where the jobs unexpectedly failed because prettier was not happy with a change I made to a directory level file.

    Ideally, lint-staged should be able to catch these linting issues before CI, but the reason it hasn't been is because the lint pre-commit hook only lints staged files in src/. I think that it makes sense that these work together more harmoniously and do the same thing.

    In this PR, I assume users will only want to lint src, though the other possibility is that pre-commit hook simply lints all staged files. Will leave the decision up to you!

    opened by TorranceYang 6
  • favicon.ico not found

    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) image

    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. image

    opened by cha2hyun 5
  • Tooltip not working in Input.tsx

    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>
            )}
    
    opened by jerrygzy 5
  • Layout Component isLandscape hook to children

    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?

    opened by jerrygzy 5
  • Getting errors in tsconfig.json file

    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.

    image

    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?

    opened by Kingkon963 5
  • 🚨 [security] Update next: 12.0.4 → 12.0.7 (patch)

    🚨 [security] Update next: 12.0.4 → 12.0.7 (patch)


    🚨 Your current dependencies have known security vulnerabilities 🚨

    This dependency update fixes known security vulnerabilities. Please see the details below and assess their impact carefully. We recommend to merge and deploy this as soon as possible!


    Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ next (12.0.4 → 12.0.7) · Repo

    Security Advisories 🚨

    🚨 Unexpected server crash in Next.js

    Next.js is a React framework. In versions of Next.js prior to 12.0.5 or 11.1.3, invalid or malformed URLs could lead to a server crash. In order to be affected by this issue, the deployment must use Next.js versions above 11.1.0 and below 12.0.5, Node.js above 15.0.0, and next start or a custom server. Deployments on Vercel are not affected, along with similar environments where invalid requests are filtered before reaching Next.js. Versions 12.0.5 and 11.1.3 contain patches for this issue.

    Release Notes

    12.0.7

    Core Changes

    • Add test for TailwindCSS JIT mode reloading: #32130
    • Ensure conf type for createServer is not changed: #32134

    12.0.6

    Core Changes

    • Fix document type import path: #32117

    12.0.5

    This upgrade is completely backward-compatible and recommended for all users on versions below 12.0.5. A backport of the patch to Next.js 11 will be available later today.

    When a URL is provided to next-server that cannot be parsed, an unhandledPromiseRejection could occur. On Node.js versions < v15.0.0 this isn't a fatal issue as only a warning is shown. However, in Node.js versions > v15.0.0, this causes the server process to exit, which can result in unexpected server crashes.

    How to Upgrade

    • We have released patch versions for both the stable and canary channels of Next.js.
    • To upgrade run npm install [email protected] --save

    Impact

    • Affected: All of the following must be true to be affected
      • Next.js versions ≥ v11.1.0 < v12.0.5
      • Node.js > v15.0.0 being used
      • Using next start or a custom server
    • Not affected: Deployments on Vercel (vercel.com) are not affected along with similar environments where invalid requests are filtered before reaching Next.js.

    We recommend everyone to upgrade regardless of whether you can reproduce the issue or not.

    How to Assess Impact

    If you are running Node.js > v15.0.0 with Next.js, you can filter any server error logs for ERR_INVALID_URL.

    What is Being Done

    As Next.js has grown in popularity and usage by enterprises, it has received the attention of security researchers and auditors. We are thankful to GitHub user hopeless-programmer-online for their investigation and discovery of the original bug.

    We've landed a patch that ensures this is handled properly so the unhandledPromiseRejection issue no longer occurs.

    Regression tests for this attack were added to the security integration test suite

    • A public CVE is requested.
    • We encourage responsible disclosure of future reports. Please email us at [email protected]. We are actively monitoring this mailbox.

    Core Changes

    • Add a swc transform for removal of console.* calls.: #31449
    • Support ESLint v8: #29865
    • fix: allow next lint without eslint-config-next installed: #29823
    • Remove TextEncoder and TextDecoder wrappers: #31490
    • simplify output messages: #31454
    • update webpack: #31455
    • NextResponse: add .json static method: #31483
    • Use _error for development in streaming: #31466
    • Refactor the middleware SSR loader: #31508
    • Add detection for Google-PageRenderer bot: #31521
    • Click-to-open error state for development overlay #14461: #21819
    • Ensure only one doctype is rendered: #31534
    • Update swc: #31540
    • Add/wasm build: #31470
    • telemetry: track usage of 'optimizeFonts': #31522
    • Make missing Document components an error: #31505
    • Adjust AVIF size so that its smaller than WebP size: #31494
    • Fix unhandled rejection on route change in dev: #31554
    • Re-add native package folders and ensure wasm artifacts are downloaded: #31561
    • Fix HMR for middleware #30791: #31548
    • Minor simplifications to renderToWebStream: #31553
    • Fix accessing router before ready for HMR ping: #31588
    • Implement SWC port of next-page-disallow-re-export-all-exports: #31582
    • [ESLint] Prevent no-html-link-for-pages from warning for static files: #31495
    • Move root div to an app wrapper: #31596
    • Add types for geo lat and long: #31624
    • Fix non-concurrent function _document: #31628
    • Remove outdated comment about string children being deprecated in next/link: #30606
    • fix(middleware): consider localhost variations: #31603
    • Update swc: #31639
    • Extract next-swc Rust code into its own package: #31635
    • Fix dev router usage before router initializing: #31632
    • avoid mutating response.cookie options: #31679
    • Add cookies and headers for request using in RSC: #31623
    • Remove trace_target env var in favor of .next/trace: #31697
    • Add error link when hydration error occurs: #31519
    • Fix initial compile timing incorrect measurement: #31733
    • Lazily init getStaticPathsWorker: #31760
    • Remove noop import: #31722
    • update webpack: #31759
    • Fix wasm loading: #31772
    • Remove some watcher hacks and update version: #31768
    • Improve and refactor some types: #31704
    • read file in swc when no loaders follow the next-swc-loader: #31682
    • Lazy-load postcss: #31762
    • update webpack: #31798
    • Ensure middleware order is preserved: #31801
    • Refactor sandbox module cache: #31822
    • Fix hydration middleware effects: #31800
    • fix: support function components in _document in no-page-custom-font: #31560
    • Add support for removing React properties.: #31606
    • Include submodules in exported type definition: #28316
    • Move require.resolve into the module scope: #31799
    • fix amp validator message format: #31018
    • Fix auto export condition in edge SSR: #31845
    • bugfix: href value is not defined when typing out the href: #31813
    • Do not load external binding if local was found: #31853
    • fix: rsc headers: #31854
    • Add port and hostname options to Next Server: #31858
    • Fix: Cannot assign to read only property 'children': #31784
    • Fix disabling of built-in CSS support if there is a custom loader: #31078
    • include no-document-import-in-page rule in plugin index: #31890
    • Account for platform/arch not supported by napi-rs: #31938
    • Removng prop writable checking in prod: #31929
    • Enable default functional document when concurrentFeatures is enabled: #31954
    • Stop using environment variables in pages/_document: #31946
    • Fix image related link prop warning with react 18 beta: #31895
    • Escape string when converting to regexp: #31791
    • Add TS types for NextMiddleware: #30578
    • fix(types): add missing ua type for NextRequest: #31901
    • Ensure that external modules are not bundled into the client for RSC: #31968
    • Resolve streaming data for flight requests: #32010
    • Allow pre-release React 18 as peer: #31991
    • fix(Link): Do not ignore onMouseEnter prop with absolute href: #32012
    • add experimental.swcFileReading flag to disable file reading in swc: #31995
    • Fix middleware types with skipLibCheck: false: #32025
    • Include page for export errors for easier debugging: #32013
    • avoid retaining webpack config too long: #32053
    • Skip warnings for Image not rendered to the dom: #32049
    • Improve exported root definitions: #32077
    • Fix running server with Polyfilled fetch: #31935
    • Ensure invalid URLs respond with 400 correctly: #32092
    • Remove future.strictPostcssConfiguration config: #32098
    • Revert "Fix running server with Polyfilled fetch (#31935)": #32100

    Documentation Changes

    • Update react-18.md: #31476
    • Add docs for the Rust Compiler (SWC).: #31467
    • Script examples: #31181
    • Fix type declaration for API Routes response: #31486
    • Update environment-variables.md: #31525
    • Add middleware examples to custom page extensions: #31545
    • Added guide for setting up Next.js with MDX: #30869
    • Fix typo in MDX guide: #31709
    • Added note on env vars: #31237
    • docs(next-config): extend phase lines reference: #31711
    • [Docs][Fix] Broken Link to API Reference: #31820
    • Docs(router): Add type for url parameter: #31737
    • SWC: Add error checks and tests to next-dynamic: #31683
    • Docs(React 18): add missing Suspense import: #31897
    • Docs(React 18): remove unnecessary React import: #31900
    • IMPROVE: Middlerware Set Cookie API Ref: #31707
    • Update next export documentation.: #31465
    • Update Jest examples and docs: #31633
    • Add note to docs about sharp memory usage on default Linux setup: #31919
    • docs(Testing): Remove duplicate link: #32071

    Example Changes

    • Replace old static path by public | typo: #31573
    • Update README of cms-cosmic example: #31701
    • 'imgix.cosmicjs.com' image domain in cms-cosmic example: #31703
    • Fix pwa demo: #31734
    • docs(examples): add secure flag explanation to with-iron-session: #31896
    • [WIP] Add tracing to with-sentry example: #30401
    • Fix with-mongo example by removing deprecated function: #30675
    • grammatical error in alert.js: #32062

    Misc Changes

    • Revert "Add docs for the Rust Compiler (SWC).": #31484
    • Ensure wasm package.json is written before publish: #31568
    • Update labeler.json
    • Update labeler.json
    • Update send-to-jaeger URL output: #31563
    • Fixing typo in Documentation about Testing: #31653
    • Add docs for the Next.js Compiler written in Rust (leveraging SWC): #31485
    • Fix prettier linting
    • Fix labels for release sections
    • Fix musl build
    • Enable require for swc_bundler: #31663
    • add test case: #31691
    • Update swc: #31816
    • docs(middleware): file extension consistency: #31879
    • Remove unpurpose test: #31898
    • Remove unnecessary workflow step : #31943
    • Update swc: #31963
    • docs(NextRequest): req.cookie => req.cookies: #31975
    • Add next-swc to labeler
    • Add Rich, Maedah, and Ismael to the docs label
    • Updated Maedahs name in label gen config: #32005
    • Fix copying swc binary for isolated tests locally: #32026
    • Lock node version for CI: #32057
    • Make CI build cache key more specific: #32059
    • Remove "yarn jest" from Next.js repo scripts: #32042
    • Fix the testall npm script: #32081

    Does any of this look wrong? Please let us know.

    Commits

    See the full diff on Github. The new version differs by more commits than we can show here.


    Depfu Status

    Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

    All Depfu comment commands
    @​depfu rebase
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    @​depfu pause
    Ignores all future updates for this dependency and closes this PR
    @​depfu pause [minor|major]
    Ignores all future minor/major updates for this dependency and closes this PR
    @​depfu resume
    Future versions of this dependency will create PRs again (leaves this PR as is)
    depfu 
    opened by depfu[bot] 4
  • 🚨 [security] Update next: 11.0.1 → 11.1.0 (minor)

    🚨 [security] Update next: 11.0.1 → 11.1.0 (minor)


    🚨 Your current dependencies have known security vulnerabilities 🚨

    This dependency update fixes known security vulnerabilities. Please see the details below and assess their impact carefully. We recommend to merge and deploy this as soon as possible!


    Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ next (11.0.1 → 11.1.0) · Repo

    Security Advisories 🚨

    🚨 Open Redirect in Next.js

    Impact

    • Affected: Users of Next.js between 10.0.5 and 10.2.0
    • Affected: Users of Next.js between 11.0.0 and 11.0.1 using pages/_error.js without getInitialProps
    • Affected: Users of Next.js between 11.0.0 and 11.0.1 using pages/_error.js and next export
    • Not affected: Deployments on Vercel (vercel.com) are not affected
    • Not affected: Deployments with pages/404.js

    We recommend everyone to upgrade regardless of whether you can reproduce the issue or not.

    Patches

    https://github.com/vercel/next.js/releases/tag/v11.1.0

    Commits

    See the full diff on Github. The new version differs by more commits than we can show here.


    Depfu Status

    Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

    All Depfu comment commands
    @​depfu rebase
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    @​depfu pause
    Ignores all future updates for this dependency and closes this PR
    @​depfu pause [minor|major]
    Ignores all future minor/major updates for this dependency and closes this PR
    @​depfu resume
    Future versions of this dependency will create PRs again (leaves this PR as is)
    depfu 
    opened by depfu[bot] 4
  • Update all Yarn dependencies (2022-11-01)

    Update all Yarn dependencies (2022-11-01)

    This is your weekly update of all Yarn dependencies. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @svgr/webpack (6.3.1 → 6.5.1, minor) · Repo · Changelog · Release · Diff

    ✳️ @typescript-eslint/eslint-plugin (5.38.1 → 5.41.0, minor) · Repo · Changelog · Release · Diff

    ✳️ @typescript-eslint/parser (5.38.1 → 5.41.0, minor) · Repo · Changelog · Release · Diff

    ✳️ eslint (8.24.0 → 8.26.0, minor) · Repo · Changelog · Release · Diff

    ✳️ react-icons (4.4.0 → 4.6.0, minor) · Repo · Release · Diff

    ✳️ tailwind-merge (1.6.1 → 1.7.0, minor) · Repo · Release · Diff

    ✳️ tailwindcss (3.1.8 → 3.2.1, minor) · Repo · Changelog · Release · Diff

    ✳️ @types/react (18.0.21 → 18.0.24, patch) · Repo

    ✳️ autoprefixer (10.4.12 → 10.4.13, patch) · Repo · Changelog · Release · Diff

    ✳️ postcss (8.4.17 → 8.4.18, patch) · Repo · Changelog · Release · Diff


    Depfu Status

    Depfu will only send you the next scheduled PR once you merge or close this one.

    All Depfu comment commands
    @​depfu refresh
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    depfu 
    opened by depfu[bot] 3
  • support question: Commiting to Git takes a really long time

    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?

    opened by osseonews 3
  • Next.js 13 App Directory

    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!

    opened by theodorusclarence 1
  • SVGR Webpack to SWC

    SVGR Webpack to SWC

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

    https://github.com/vercel/next.js/discussions/33161#discussioncomment-2082895

    opened by theodorusclarence 0
Owner
Theodorus Clarence
I work with React Ecosystem, and write to teach people how to rebuild and redefine fundamental concepts through mental models.
Theodorus Clarence
Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript

?? Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS.

Hocky Yudhiono 5 Oct 4, 2022
⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

M Haidar Hanif 71 Nov 15, 2022
A starter project for React-Three-Fiber bootstrapped with Create-React-App and some useful packages

A starter project for React-Three-Fiber bootstrapped with Create-React-App and some useful packages

Kevin Omyonga 13 Oct 16, 2022
Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates

Stablo Blog Template - Next.js & Sanity CMS Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates. Clic

Web3Templates 132 Nov 18, 2022
A simple portfolio site, built in Next.js, Tailwind CSS - using this great blogging starter template.

A simple portfolio site, built in Next.js, Tailwind CSS - using this great blogging starter template.

Thad Blankenship 5 Oct 3, 2022
Nextacular 15 Oct 3, 2022
Storybook-addon-next - A no config Storybook addon that makes Next.js features just work in Storybook

Storybook Addon Next ?? No config support for Next.js: Tired of writing and debu

Ryan Clements 181 Nov 17, 2022
Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.

Notus NextJS A beautiful UI Kit and Admin for Tailwind CSS and NextJS. Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Le

Creative Tim 797 Nov 18, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 136 Oct 26, 2022
🚀 A web extension starter built with React, Typescript, and Tailwind CSS.

A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, and Brave.

BCIT Design & Development Club (BCIT-DDC) 27 Nov 12, 2022
This starter template comes as a monorepo for your next fullstack dApp Development

This starter template comes as a monorepo for your next fullstack dApp Development. This will be your tools: ?? React + Vite + Typescript ?? Solidity + Hardhat + Typescript

Johannes 21 Nov 3, 2022
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

nextjs-ts-mui5-scss-storybook-starter ?? Next.js + TypeScript + Material UI v5 +

Muhammad Ridho Anshory 13 Oct 19, 2022
Nextjs-starter - A TypeScript starter for Next.js

Next.js TypeScript Starter Features ⚡️ Next.js 12 ⚛️ React 17 ⛑ TypeScript ?? ES

Felix Lee 4 Sep 14, 2022
A personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css

React JS Resume Website Template View a live demo here. If this template has helped you and you'd like to support my work, feel free to ♥️ Sponsor the

Tim Baker 1.1k Nov 24, 2022
Ts-next-chakra-motion-kit - Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript

Typescript Next.js Chakra-UI Framer-Motion Starter Kit Start with a powerful tem

Alexandre Gossard 39 Oct 14, 2022
VRT starter (Vite, React, Tailwind CSS)

VRT-Starter (vite, react, tailwindcss) The most lightweight, vanilla template for React, Vite, & Tailwind CSS. It's designed to save you a couple minu

Mitchell Johnson 8 Jul 14, 2022
A starter Repo with RainbowKit + Vite + React + Tailwind CSS

?? Welcome to the Vite + React + Tailwind CSS + RainbowKit Starter! To install dependencies npm install or yarn install To run the project locally npm

joshcs.eth | jcs.sol 20 Oct 27, 2022
Boilerplate in typescript with : Next / Next-Auth / Siwe / Web3modal / useDapp / next-i18n / reactMUI

Boilerplate in typescript with : Next / Next-Auth / Siwe / Web3modal / useDapp / next-i18n / reactMUI

null 15 Oct 23, 2022
A simple react native starter template that bootstraps development of your mobile application

rn-start-template A simple react native starter template that bootstraps development of your mobile application. What's inside React native 0.63 templ

null 3 Jan 15, 2022