Next.js


<p>Next.jsでpages内に新しくファイルを作成する時、ある程度の書かないといけないことは決まっていてそれを毎回書いているのはちょっと面倒くさい。。そこでショートカットで出力できるようにする方法を調べたのでメモしておきます。</p>



<p>（VScodeで開発していることが多く、Pycharmの情報が少なかった&#8230;）</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="640" height="254" src="https://craft-time.jp/wp-content/uploads/2022/03/image-3.png" alt="" class="wp-image-182" srcset="https://craft-time.jp/wp-content/uploads/2022/03/image-3.png 640w, https://craft-time.jp/wp-content/uploads/2022/03/image-3-300x119.png 300w, https://craft-time.jp/wp-content/uploads/2022/03/image-3-304x121.png 304w, https://craft-time.jp/wp-content/uploads/2022/03/image-3-282x112.png 282w" sizes="(max-width: 640px) 100vw, 640px" /><figcaption>このテンプレをパッと作れるようになりたい</figcaption></figure></div>



<h2>Pycharmのプラグインをインストールする</h2>



<div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="640" height="472" src="https://craft-time.jp/wp-content/uploads/2022/03/image.png" alt="" class="wp-image-174" srcset="https://craft-time.jp/wp-content/uploads/2022/03/image.png 640w, https://craft-time.jp/wp-content/uploads/2022/03/image-300x221.png 300w, https://craft-time.jp/wp-content/uploads/2022/03/image-290x214.png 290w, https://craft-time.jp/wp-content/uploads/2022/03/image-282x208.png 282w" sizes="(max-width: 640px) 100vw, 640px" /><figcaption>「React Snippets」「Tailwind Formatter」をインストール</figcaption></figure></div>



<p>Pycharmの「Preferences」→「Plugins」で下記2つをインストールしてください。</p>



<ul><li><strong>React Snippets</strong></li><li><strong>Tailwind Formatter</strong></li></ul>



<h2>作成したファイルに「rsf」を打つ</h2>



<p>「<strong>rsf</strong>」と打つと下記のテンプレートを出力できる。（VScodeだと「rafce」??）</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="640" height="118" src="https://craft-time.jp/wp-content/uploads/2022/03/image-1.png" alt="" class="wp-image-176" srcset="https://craft-time.jp/wp-content/uploads/2022/03/image-1.png 640w, https://craft-time.jp/wp-content/uploads/2022/03/image-1-300x55.png 300w, https://craft-time.jp/wp-content/uploads/2022/03/image-1-304x56.png 304w, https://craft-time.jp/wp-content/uploads/2022/03/image-1-282x52.png 282w" sizes="(max-width: 640px) 100vw, 640px" /><figcaption>「rsf」を打つと候補が出てくる</figcaption></figure></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>import React from &#39;react&#39;;

function ContactPage(props) {
    return (
        &lt;div&gt;&lt;/div&gt;
    );
}

export default ContactPage;</code></pre></div>



<p>早く作るためにこういうショートカットは覚えて行きたい。</p>



<p class="references"><a href="https://stackoverflow.com/questions/63239809/webstorm-functional-snippet-react">https://stackoverflow.com/questions/63239809/webstorm-functional-snippet-react</a></p>


【Pycharm】Next.jsで新しくファイルを作る時にパッとテンプレを作成する方法。


<p>Next.jsを利用している中で、Tailwindを導入してみました。</p>



<p>その過程をメモしていきます。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#Tailwind_CSS">Tailwind CSSをインストールする</a></li><li><a href="#tailwindconfigjs">「tailwind.config.js」を生成する</a></li><li><a href="#tailwindconfigjs-2">「tailwind.config.js」を編集する</a></li><li><a href="#stylesglobalcss">「styles/global.css」を編集する</a></li><li><a href="#Tailwind">Tailwind導入完了。</a></li><li><a href="#Tailwind-2">Tailwindが反映されない場合の対処法</a></li><li><a href="#i">おまけ：よく使うプラグイン</a><ul><li><a href="#_tailwindcssline-clamp">プラグイン⑴ @tailwindcss/line-clamp</a></li></ul></li></ul></div>
<h2><span id="Tailwind_CSS">Tailwind CSSをインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="ターミナル"><code>$ npm i tailwindcss@latest postcss@latest autoprefixer@latest</code></pre></div>



<h2><span id="tailwindconfigjs">「tailwind.config.js」を生成する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="ターミナル"><code>$ npx tailwindcss init -p</code></pre></div>



<h2><span id="tailwindconfigjs-2">「tailwind.config.js」を編集する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="tailwind.config.js" data-lang="JavaScript"><code>module.exports = {
    content: [
        &quot;./pages/**/*.{js,ts,jsx,tsx}&quot;,       // 追加
        &quot;./components/**/*.{js,ts,jsx,tsx}&quot;,  // 追加（componentsフォルダがある場合）
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}</code></pre></div>



<p><code>content</code>内の<code>./components/*<em>/</em>.{js,ts,jsx,tsx}</code>の部分は「componentsフォルダ内」のファイルでもTailwind.cssが適用されるようにしています。</p>



<p>他にも適用したいフォルダがある場合には、このcomponentsの部分を変更したり追加したりしてみてください。</p>



<h2><span id="stylesglobalcss">「styles/global.css」を編集する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-file="styles/global.css" data-lang="CSS"><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre></div>



<p>元々記載されているCSSは削除かコメントアウトする。</p>



<h2><span id="Tailwind">Tailwind導入完了。</span></h2>



<p>これでclassNameにTailwind.cssの記載をすれば反映されます。</p>



<h2><span id="Tailwind-2">Tailwindが反映されない場合の対処法</span></h2>



<p>既にローカルサーバーで起動している場合は、すぐに反映されないことがあります。その場合は<strong>再度起動</strong>してみてください。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="ターミナル"><code>$ npm run dev</code></pre></div>



<h2><span id="i">おまけ：よく使うプラグイン</span></h2>



<h3><span id="_tailwindcssline-clamp">プラグイン⑴ @tailwindcss/line-clamp</span></h3>



<p><strong>指定した行数以降のテキストを「&#8230;（三点リーダー）」に変換する</strong>プラグインです。</p>



<ul>
<li><a href="https://github.com/tailwindlabs/tailwindcss-line-clamp">tailwindlabs/tailwindcss-line-clamp &#8211; GitHub</a></li>
</ul>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install @tailwindcss/line-clamp</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="tailwind.config.js" data-lang="JavaScript"><code>module.exports = {
    content: [
        &quot;./pages/**/*.{js,ts,jsx,tsx}&quot;,
        &quot;./components/**/*.{js,ts,jsx,tsx}&quot;,
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require(&#39;@tailwindcss/line-clamp&#39;),  // 追加
    ],
}</code></pre></div>



<ul class="references">
<li><a href="https://tailwindcss.com/docs/installation"> Installation: Tailwind CLI</a></li>



<li><a href="https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css">Just-In-Time: The Next Generation of Tailwind CSS</a></li>



<li><a href="https://github.com/tailwindlabs/tailwindcss-line-clamp">tailwindlabs/tailwindcss-line-clamp &#8211; GitHub</a></li>
</ul>



<p></p>


「Next.js」の記事一覧（4ページ目）