The latest articles on DEV Community by Huy (@huydhoang). https://dev.to/huydhoang https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F244521%2F9adb305d-35eb-4ea2-9f91-21d655559908.png https://dev.to/huydhoang en Huy Mon, 22 Nov 2021 08:53:24 +0000 https://dev.to/huydhoang/nextjs-mui-v5-with-typescript-support-b51 https://dev.to/huydhoang/nextjs-mui-v5-with-typescript-support-b51 <p>Since MUI v5 (Material UI) was released, I've started a new project with it. But as it's a brand new version with breaking changes, I couldn't find an example project that I'm fully satisfied with.</p> <p><a href="https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript">The one on the official MUI's Github repo</a> featuring Next.js with TypeScript (my framework of choice) didn't follow <a href="https://dev.to/vadorequest/a-2021-guide-about-structuring-your-next-js-project-in-a-flexible-and-efficient-way-472">standard Next.js folder structure</a>, as of this writing.</p> <p>So I felt inclined to create one with the most basic features that I would use myself. The result is on my Github (link below).</p> <p>Here's a screenshot of the About page:<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wBd3yzCu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et449xhczgb5cwjycdgy.PNG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wBd3yzCu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et449xhczgb5cwjycdgy.PNG" alt="About Page" width="880" height="587"></a></p> <p>It features a standard folder structure as generated by <code>create-next-app</code> and the leanest usable ESLint + Prettier configs for linting/formatting.</p> <p><a href="https://github.com/huydhoang/next-mui-emotion">View on Github</a></p> <p>If you like my work, please give it a star to let me know it's useful to you :)</p> nextjs mui typescript template Huy Thu, 01 Apr 2021 04:35:25 +0000 https://dev.to/huydhoang/next-js-typescript-template-fbh https://dev.to/huydhoang/next-js-typescript-template-fbh <h1> Next.js TypeScript Template with Auto Code Formatting in VSCode </h1> <h2> Getting Started </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>git clone https://github.com/huydhoang/next-typescript-template.git <span class="nb">cd </span>next-typescript-template pnpm dev </code></pre> </div> <p><a href="https://pnpm.js.org/">pnpm</a> is a cool alternative to <code>yarn</code> or <code>npm</code> as it is faster and can reuse downloaded packages to reduce the size of <code>node_modules</code>.</p> <p>If you use <code>yarn</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>yarn dev </code></pre> </div> <p>or <code>npm</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm run dev </code></pre> </div> <h2> Auto Code Formatting </h2> <p>Auto Code Formatting for TypeScript was setup using ESLint and Prettier in VSCode.<br> Simply turn on <code>Editor: Format On Save</code> feature within VSCode and let the magic happen.</p> <p><code>File &gt; Preferences &gt; Search 'Format On Save'</code></p> <p><a href="https://github.com/huydhoang/next-typescript-template">https://github.com/huydhoang/next-typescript-template</a></p> <p>Feel free to share and comment! :)</p> nextjs typescript prettier eslint