次.CSS +タイプスクリプトスターターテンプレート

22391 ワード
tailwindcss react typescript nextjs テキストリンク
新しいプロジェクトを設定し、すべてを接続するには多くの時間がかかります.だから私は簡単に使用するための私のお気に入りの技術スタックとスターターテンプレートを作成することを決めた.

テオフロクラレンス / TS NEXJSテールウインドスターター


🔋 次。CSS +タイプのスターターは便利な開発機能を満載


内部は


インストール済みパッケージ


  • clsx , 建設用役className 条件付きの文字列.

  • react-icons , SVGは人気のあるアイコンパックのアイコンを反応させる.

    • 2 . UnstyledLinkコンポーネント


    次のコンポーネントとして使用します.jsリンク.HREFが起動した場合、次/リンクを出力します/ or # , そうすればa タグ付きtarget='_blank' . また、外部リンクのカーソルスタイルを追加します.
    私は、このコンポーネントを使用することにより、次のためのボイラープレートを簡素化することがわかりました.JSリンクLink and a タグ.
    // src/components/UnstyledLink.tsx
import clsx from 'clsx';
import Link, { LinkProps } from 'next/link';

export type UnstyledLinkProps = {
  href: string;
  children: React.ReactNode;
  openNewTab?: boolean;
  className?: string;
} & React.ComponentPropsWithoutRef<'a'> &
  LinkProps;

export default function UnstyledLink({
  children,
  href,
  openNewTab,
  className,
  ...rest
}: UnstyledLinkProps) {
  const isNewTab =
    openNewTab !== undefined
      ? openNewTab
      : href && !href.startsWith('/') && !href.startsWith('#');

  if (!isNewTab) {
    return (
      <Link href={href}>
        <a {...rest} className={className}>
          {children}
        </a>
      </Link>
    );
  }

  return (
    <a
      target='_blank'
      rel='noopener noreferrer'
      href={href}
      {...rest}
      className={clsx(className, 'cursor-[ne-resize]')}
    >
      {children}
    </a>
  );
}

    カスタマイズコンポーネント


    UnstyledLinkコンポーネントを使用すると、すべての既定のスタイルを使用して新しいコンポーネントに拡張できます.簡単な使用のためにスターターに焼かれる若干のスタイルは、ここにあります.

    絶対輸入


    私はファンですVue style absolute import , それで、私もtsconfigの上で構成を加えました.JSON、だから我々はちょうどそのようにインポートすることができます.
    import Nav from '../../../components/Nav';

simplified to

import Nav from '@/components/Nav';

    SEOコンポーネント


    デフォルトの設定src/components/Seo.tsx . デフォルトを使用する場合は、<Seo /> あなたのページの上に.
    また、ページを1つのタイトルをオーバーライドすることによってカスタマイズすることができます小道具として説明
    <Seo
  title='Next.js Tailwind Starter'
  description='your description'
/>
    または、あなたがまだタイトルのままでいたいならば%s | Next.js Tailwind Starter , 使えますtemplateTitle 小道具
    私が使っているSEOコンポーネントはここにあります、あなたは単にデフォルトを変えることができます、そして、あなたは行きます
    // src/components/Seo.tsx
import Head from 'next/head';
import { useRouter } from 'next/router';

const defaultMeta = {
  title: 'Next.js Tailwind Starter',
  site_name: 'Next.js Tailwind Starter',
  description: 'A template for Next.js and Tailwindcss by Theodorus Clarence',
  url: 'https://theodorusclarence.com',
  image: 'https://theodorusclarence.com/favicon/large-og.jpg',
  type: 'website',
  robots: 'follow, index',
};

type SeoProps = {
  date?: string;
  templateTitle?: string;
} & Partial<typeof defaultMeta>;

export default function Seo(props: SeoProps) {
  const router = useRouter();
  const meta = {
    ...defaultMeta,
    ...props,
  };
  meta['title'] = props.templateTitle
    ? `${props.templateTitle} | ${meta.site_name}`
    : meta.title;

  return (
    <Head>
      <title>{meta.title}</title>
      <meta name='robots' content={meta.robots} />
      <meta content={meta.description} name='description' />
      <meta property='og:url' content={`${meta.url}${router.asPath}`} />
      <link rel='canonical' href={`${meta.url}${router.asPath}`} />
      {/* Open Graph */}
      <meta property='og:type' content={meta.type} />
      <meta property='og:site_name' content={meta.site_name} />
      <meta property='og:description' content={meta.description} />
      <meta property='og:title' content={meta.title} />
      <meta name='image' property='og:image' content={meta.image} />
      {/* Twitter */}
      <meta name='twitter:card' content='summary_large_image' />
      <meta name='twitter:site' content='@th_clarence' />
      <meta name='twitter:title' content={meta.title} />
      <meta name='twitter:description' content={meta.description} />
      <meta name='twitter:image' content={meta.image} />
      {meta.date && (
        <>
          <meta property='article:published_time' content={meta.date} />
          <meta
            name='publish_date'
            property='og:publish_date'
            content={meta.date}
          />
          <meta
            name='author'
            property='article:author'
            content='Theodorus Clarence'
          />
        </>
      )}
    </Head>
  );
}

    カスタム404ページ


    次.JSの既定の404はかなり簡単ですので、いくつかの基本的なスタイル、およびいくつかのちらつきアニメーションを追加しました.

    7 .ワークスペースのスニペット


    などのスニペットは、USENT、UseEffect、反応成分、および次の反応をインポートします.SEOインポート付きのJSページが含まれています.View more

    ハスキー、きれい、リント、コミット


    3つのハスキーフックを入れました.
  • プリコミット、実行しているeslintとprettierを使用してコードをフォーマット
  • MSG ,コミットを実行するConventional Commit コミットメッセージ
  • ポストマージyarn あらゆるgit pull またはすべての新しいパッケージをインストールし、行く準備ができるようにマージ後

    • デフォルトのFavicon宣言


    用途Favicon Generator でファイルを上書きする/public/favicon

    デフォルトの風のCSS基本スタイル


    応答の見出しサイズのデフォルトのスタイル、および.layout 大きな画面サイズの最大幅をサポートする.詳細についてはmy blog post

    プリロード&セルフホストフォント


    INTERは、このスターターで自己ホストされてプリロードされる変数フォントです.

    テオフロクラレンス / TS NEXJSテールウインドスターター


    🔋 次。CSS +タイプのスターターは便利な開発機能を満載


    Githubでそれをチェック!あなたが貢献したいならば、PRを開けてください!何かが改善されることができるならば、知らせてください.
    スター⭐ 非常に有難いです!
    [HackerRank] Designer PDF Viewer
    JavaScriptログクラス(2)