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

Last update: Aug 1, 2022

🔋 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

GitHub

https://github.com/theodorusclarence/ts-nextjs-tailwind-starter
Comments
  • 1. 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

    Reviewed by BESHOI at 2022-05-25 11:45
  • 2. 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`
    
    Reviewed by jerrygzy at 2022-01-28 21:36
  • 3. 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>
            )}
    
    Reviewed by jerrygzy at 2022-02-27 15:55
  • 4. 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?

    Reviewed by jerrygzy at 2022-02-08 09:29
  • 5. 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?

    Reviewed by Kingkon963 at 2022-01-26 22:12
  • 6. 🚨 [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)
    Reviewed by depfu[bot] at 2021-12-07 22:18
  • 7. 🚨 [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)
    Reviewed by depfu[bot] at 2021-08-12 16:09
  • 8. i112 implement shimmer

    • feat: add Skeleton component
    • feat: change NextImage loader to shimmer

    https://user-images.githubusercontent.com/55318172/155867729-8c3176ad-ede4-4443-b42b-780517615e5a.mp4

    Related Issue

    • Resolve #112
    • Resolve #97
    Reviewed by theodorusclarence at 2022-02-27 04:00
  • 9. 🚨 [security] Update next: 12.0.10 → 12.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 (12.0.10 → 12.1.0) · Repo

    Security Advisories 🚨

    🚨 Improper CSP in Image Optimization API for Next.js versions between 10.0.0 and 12.1.0

    Impact

    • Affected: All of the following must be true to be affected
      • Next.js between version 10.0.0 and 12.0.10
      • The next.config.js file has images.domains array assigned
      • The image host assigned in images.domains allows user-provided SVG
    • Not affected: The next.config.js file has images.loader assigned to something other than default

    Patches

    Next.js 12.1.0

    Workarounds

    Change next.config.js to use a different loader configuration other than the default, for example:

    module.exports = {
      images: {
        loader: 'imgix',
        path: 'https://example.com/myaccount/',
      },
    }

    Or if you want to use the loader prop on the component, you can use custom:

    module.exports = {
      images: {
        loader: 'custom',
      },
    }
    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)
    Reviewed by depfu[bot] at 2022-02-17 22:16
  • 10. When I put header in Layout why does it show up rendered twice?

    image

    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}</>;
    }
    
    Reviewed by allenchuang at 2022-02-04 08:56
  • 11. chore(package): update next to 12.0.9


    🚨 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.8 → 12.0.9) · Repo

    Security Advisories 🚨

    🚨 DOS Vulnerability for self-hosted next.js apps using i18n

    Impact

    Vulnerable code could allow a bad actor to trigger a denial of service attack for anyone running a Next.js app at version >= 12.0.0, and using i18n functionality.

    • Affected: All of the following must be true to be affected by this CVE
      • Next.js versions above v12.0.0
      • Using next start or a custom server
      • Using the built-in i18n support
    • Not affected:
      • Deployments on Vercel (vercel.com) are not affected along with similar environments where invalid requests are filtered before reaching Next.js.

    Patches

    A patch has been released, [email protected], that mitigates this issue. We recommend all affected users upgrade as soon as possible.

    Workarounds

    We recommend upgrading whether you can reproduce or not although you can ensure /${locale}/_next/ is blocked from reaching the Next.js instance until you upgrade.

    For more information

    If you have any questions or comments about this advisory:

    Release Notes

    12.0.9

    Core Changes

    • middlewares: limit process.env to inferred usage: #33186
    • update webpack: #33207
    • Abstract out native filesystem usage from the base server: #33226
    • use text data url instead of base64 for shorter encoding: #33218
    • chore(deps): upgrade postcss: #33142
    • Fix global process testing for the process polyfill: #33220
    • Update swc: #33201
    • improve full refresh overlay: #33301
    • Custom app for server components: #33149
    • Update yarn PnP tests and disable swc file reading for PnP: #33236
    • Base Http for BaseServer: #32999
    • Update swc: #33342
    • Update check for fallback pages during export: #33323
    • Pre-compile more dependencies: #32742
    • Remove node fetch polyfill from base server: #33395
    • Replace regexp to plain string for optimization render HTML: #33306
    • Fix broken html on streaming render for error page: #33399
    • Disable cache for rsc pages: #33438
    • Fix pre-compiled check from copying react-refresh-utils: #33442
    • fix(next-swc): Update swc: #33427
    • Move middleware handling to node server: #33448
    • Enforce absolute URLs in Edge Functions runtime: #33410
    • feat(next-swc): Update swc: #33461
    • Update main field for nccd jest-worker: #33465
    • chore(deps): upgrade node-fetch: #33466
    • Move static serving to next server: #33475
    • feat(next-swc): Update swc: #33485
    • Fix multiple calls to image onLoadingComplete(): #33474
    • Refactor base server to remove native dependencies: #33499
    • Update swc: #33514
    • Implement abstract methods to get manifest files in the base server: #33537
    • Simplify getMiddlewareInfo calls: #33542
    • Fix static file check with i18n: #33503
    • Bump styled-jsx: #33546
    • Ensure optional value normalizing is correct for index: #33547
    • Bump nft to 0.17.4: #33548
    • Add next-multilingual example: #29386
    • Removed the s from NextConfig: #33560
    • feat(next-swc): Update swc: #33595
    • Fix rsc export component name detection: #33608
    • upgrade webpack: #33549
    • Ensure fetch polyfill is loaded in next-server: #33616
    • feat(next-swc): Update swc: #33628
    • Add lazyRoot optional property to next/image component : #33290
    • feat(next-swc): Update swc: #33675
    • Implement web server as the request handler for edge SSR: #33635
    • Relay Support in Rust Compiler: #33240
    • Revert "Relay Support in Rust Compiler": #33699

    Documentation Changes

    • Fixed broken link related to the recently merged Data fetching docs refactor: #33209
    • Removed backticks on data fetching api titles: #33216
    • Added links to data fetching api refs, fixed title: #33221
    • Remove outdated & possibly confusing statement about redirects: #33224
    • [examples] Add a statically generated blog example using Next.js and Builder.io: #22094
    • Typo Fix: #33252
    • Update font-optimization.md: #33266
    • Fixed broken links in data fetching docs: #33250
    • docs: Mention middleware for getStaticProps: #33273
    • Add sections for Remove React Properties and Remove Console to compiler docs: #33311
    • Update links in next export + next/image error message: #33317
    • Add onLoad gottcha note to next/script docs: #33097
    • Update security-headers.md: fix path does not match homepage: #33137
    • fix minor typo in SWR: #33378
    • ReferenceError in authentication.md example fixed: #33411
    • docs: fix url: #33409
    • fix(docs): Fix typo in Custom Build Id docs: #33515
    • [docs] Update authentication docs to fix iron-session link.: #33483
    • docs(authentication): fix iron-session example link: #33502
    • Update middleware documentation for custom server: #33535
    • Removed unrequired path in docs' manifest: #33579
    • Update next/server documentation for geo: #33609
    • Clarify next/image usage with next export based on feedback.: #33555
    • Clarify headers config option description: #33484
    • fix(errors/no-cache): netlify-plugin-cache-nextjs has been deprecated: #33629
    • Updated docs for getServerSideProps and getStaticProps return values: #33577
    • Use relative path for example: #33565
    • chore(docs): update security headers specification: #33673
    • REMOVE: duplicate key in docs/testing.md: #33681

    Example Changes

    • [examples] Update remark dependency for blog-starter: #33313
    • Update package.json for examples/with-supabase-auth-realtime-db: #33321
    • Working example for building forms with Next.js: #32669
    • Updates dependency version of frontend SDK in with-supertokens example: #33393
    • docs: add skynexui to examples: #33326
    • Update with-linaria dependency: #33487
    • Update Supabase example README.: #33610
    • [examples] Add new Tailwind CSS Prettier plugin to example: #33614

    Misc Changes

    • Update license year
    • fix(docs): master branch renaming: #33312
    • Add link to security email directly.: #33358
    • Fix getServerSideProps hanging in dev on early end: #33366
    • [docs] Fix 404 link for testing example.: #33407
    • Update to latest version of turbo: #33613
    • Update other instances of node-fetch: #33617

    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)
    Reviewed by depfu[bot] at 2022-01-29 00:07
Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript
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.

Jul 27, 2022
⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more
⏪ 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

Aug 4, 2022
Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates
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

Aug 5, 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.

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

Jul 25, 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.
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

Jul 30, 2022
🚀 A web extension starter built with React, Typescript, and Tailwind CSS.
🚀 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.

Jul 19, 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

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

Jan 16, 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 + Sass + Storybook starter

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

Jul 13, 2022
Nextjs-starter - A TypeScript starter for Next.js

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

Jul 1, 2022
Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.
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

Aug 1, 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

Jul 31, 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 starter template comes as a monorepo for your next fullstack dApp Development. This will be your tools: ?? React + Vite + Typescript ?? Solidity + Hardhat + Typescript

Jul 5, 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

Jul 19, 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

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

Jul 28, 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

Jul 27, 2022
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

Aug 2, 2022
Electron 11 + TypeScript 4.0 + Vite 2 + React 17 + Tailwind 2 + twstyled starter
Electron 11 + TypeScript 4.0 + Vite 2 + React 17 + Tailwind 2 + twstyled starter

Electron 11 + TypeScript 4.0 + Vite 2 + React 17 + Tailwind 2 + twstyled starter

Aug 6, 2022
Turborepo (NestJS + Prisma + NextJS + Tailwind + Typescript + Jest) Starter

Fullstack Turborepo starter. Typescript, Nestjs, Nextjs, Tailwind, Prisma, Github Actions, Docker, And Reverse proxy configured

Aug 7, 2022