Upgrade/next 12 (#264)

* chore: upgrade to next 12

* chore: update package-lock

* docs: update image docs to use mdx v2 compatible code

* docs: increase first load js

* chore: v1.2.0

README.md

@@ -40,7 +40,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 
 - Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2) and primary color attribute
 - Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
-- Lightweight, 39kB first load JS, uses Preact in production build
+- Lightweight, 45kB first load JS, uses Preact in production build
 - Mobile-friendly view
 - Light and dark theme
 - Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics

data/blog/introducing-tailwind-nextjs-starter-blog.mdx

@@ -44,7 +44,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 
 - Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2) and primary color attribute
 - Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
-- Lightweight, 39kB first load JS, uses Preact in production build
+- Lightweight, 45kB first load JS, uses Preact in production build
 - Mobile-friendly view
 - Light and dark theme
 - Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics

data/blog/new-features-in-v1.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'New features in v1'
 date: 2021-08-07T15:32:14Z
-lastmod: '2021-09-11'
+lastmod: '2021-10-27'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
@@ -14,7 +14,7 @@ A post on the new features introduced in v1.0. New features:
 
 <TOCInline toc={props.toc} exclude="Overview" toHeading={2} />
 
-First load JS decreased from 43kB to 39kB despite all the new features added!
+First load JS decreased from 43kB to 39kB despite all the new features added!^[With the new changes in Nextjs 12, first load JS increase to 45kB.]
 
 See [upgrade guide](#upgrade-guide) below if you are migrating from v0 version of the template.
 

data/blog/pictures-of-canada.mdx

@@ -20,16 +20,16 @@ Since we are using mdx, we can create a simple responsive flexbox grid to displa
 
 <div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
   <div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
-    <Image alt="Maple" src="/static/images/canada/maple.jpg" width={640} height={427} />
+    ![Maple](/static/images/canada/maple.jpg)
   </div>
   <div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
-    <Image alt="Lake" src="/static/images/canada/lake.jpg" width={640} height={427} />
+    ![Lake](/static/images/canada/lake.jpg)
   </div>
   <div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
-    <Image alt="Mountains" src="/static/images/canada/mountains.jpg" width={640} height={427} />
+    ![Mountains](/static/images/canada/mountains.jpg)
   </div>
   <div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
-    <Image alt="Toronto" src="/static/images/canada/toronto.jpg" width={640} height={427} />
+    ![Toronto](/static/images/canada/toronto.jpg)
   </div>
 </div>
 
@@ -38,23 +38,21 @@ Since we are using mdx, we can create a simple responsive flexbox grid to displa
 ```js
 <div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
   <div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
-    <Image alt="Maple" src="/static/images/canada/maple.jpg" width={640} height={427} />
+    ![Maple](/static/images/canada/maple.jpg)
   </div>
   <div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
-    <Image alt="Lake" src="/static/images/canada/lake.jpg" width={640} height={427} />
+    ![Lake](/static/images/canada/lake.jpg)
   </div>
   <div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
-    <Image alt="Mountains" src="/static/images/canada/mountains.jpg" width={640} height={427} />
+    ![Mountains](/static/images/canada/mountains.jpg)
   </div>
   <div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
-    <Image alt="Toronto" src="/static/images/canada/toronto.jpg" width={640} height={427} />
+    ![Toronto](/static/images/canada/toronto.jpg)
   </div>
 </div>
 ```
 
-_Note_: Currently, one has to use the `Image` component instead of the markdown syntax between jsx. Thankfully, it's one of the default components passed to the MDX Provider and can be used directly.
-
-When MDX v2 is ready, one could potentially interleave markdown in jsx directly! Follow [MDX v2 issues](https://github.com/mdx-js/mdx/issues/1041) for updates.
+With MDX v2, one can interleave markdown in jsx as shown in the example code.
 
 ### Photo Credits
 

next.config.js

@@ -8,7 +8,6 @@ module.exports = withBundleAnalyzer({
   eslint: {
     dirs: ['pages', 'components', 'lib', 'layouts', 'scripts'],
   },
-  experimental: { esmExternals: true },
   webpack: (config, { dev, isServer }) => {
     config.module.rules.push({
       test: /\.(png|jpe?g|gif|mp4)$/i,