Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Next.js to version 9.4.4 #325

Merged
merged 3 commits into from
Jun 19, 2020
Merged

Update Next.js to version 9.4.4 #325

merged 3 commits into from
Jun 19, 2020

Conversation

iquabius
Copy link
Owner

@iquabius iquabius commented Jun 19, 2020

Closes #304 #322

There's a lot of new features:

Next.js 9.1.7

Monday, January 6th 2020 (6 months ago)

Next.js 9 was released six (6) months ago, followed by Next.js 9.1 three (3) months ago. These two releases added very powerful new features to Next.js, without increasing our baseline client runtime size.

Since then, we've focused heavily on refining and improving the framework as a whole: 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.1.5, 9.1.6, and 9.1.7. Let's dive into what these releases have improved!

  • 3% – 8%+ Smaller Client-Side JavaScript Size
  • Redesigned Production Build CLI Output
  • New Built-In Polyfills: fetch(), URL, and Object.assign
  • Optimized Page Loading: Better FCP and TTI
  • Support for the Latest JavaScript Features
  • Zero-Config Deployment Support for next export Applications
  • React Strict Mode Compliance and Opt-In
  • Automated Testing against Nightly React Builds

Next.js 9.2

Wednesday, January 15th 2020 (5 months ago)

We are excited today to introduce the production-ready Next.js 9.2, featuring:

  • Built-In CSS Support for Global Stylesheets
  • Built-In CSS Module Support for Component-Level Styles
  • Improved Code-Splitting Strategy
  • Catch-All Dynamic Routes

Highlight:

Improved Code-Splitting Strategy: The Google Chrome team heavily optimized Next.js' code-splitting strategy, resulting in significantly smaller client-side bundles. Furthermore, they've maximized HTTP/2 utilization to improve page load speed without hurting HTTP/1.1 performance.

Next.js 9.3

Monday, March 9th 2020 (3 months ago)

We are excited today to introduce Next.js 9.3, featuring:

  • Next-gen Static Site Generation (SSG) Support
  • Preview Mode
  • Built-In Sass Support for Global Stylesheets
  • Built-In Sass CSS Module Support for Component-Level Styles
  • Automatic Static Optimization for 404
  • 32 kB Smaller Runtime
  • Next.js Community on GitHub Discussions

Highlight:

Next-gen Static Site Generation (SSG) Support: Built-in optimized static generation through new data fetching methods.

Today we're incredibly excited to announce two new data fetching methods: getStaticProps and getServerSideProps. We also include a way to provide parameters to statically generate static pages for dynamic routes: getStaticPaths.

Next.js 9.4

Monday, May 11th 2020 (about 1 month ago)

We are excited today to introduce Next.js 9.4, featuring:

  • Fast Refresh
  • Incremental Static Regeneration (beta)
  • CMS Examples
  • New Environment Variables Support
  • Improved Built-in Fetch Support
  • Integrated Web Vitals Reporting
  • Absolute Imports and Aliases
  • Configurable Sass Support
  • Improved Log Output

Highlight:

Next.js introduced Static Site Generation methods in 9.3 with a clear goal in mind: we should get the benefits of static (always fast, always online, globally distributed), but with excellent support for dynamic data, which Next.js is known for.

To get the best of both worlds, Next.js supports Incremental Static Generation, updating static content after you have already built your site. For example, in 9.3 we’ve introduced the fallback: true option in getStaticPaths, which allows you to add new pages at runtime.

Both incremental features (adding pages and lazily updating them), as well as preview mode, are already fully supported by both next start and the Vercel edge platform out of the box.

@iquabius
Copy link
Owner Author

Improved Code-Splitting Strategy

Before

olimat/packages/web on  master [$!?] is 📦 v0.0.1 took 19s 611ms 
➜ npm run analyze

> @olimat/[email protected] analyze /home/iqb/Code/olimat/packages/web
> cross-env ANALYZE=true next build

> Using external babel configuration
> Location: "/home/iqb/Code/olimat/packages/web/.babelrc"
Webpack Bundle Analyzer saved report to /home/iqb/Code/olimat/packages/web/.next/analyze/server.html
Webpack Bundle Analyzer saved report to /home/iqb/Code/olimat/packages/web/.next/analyze/client.html                                    
Creating an optimized production build

Compiled successfully.

Warning: You have opted-out of Automatic Static Optimization due to `getInitialProps` in `pages/_app`.
Read more: https://err.sh/next.js/opt-out-auto-static-optimization

Automatically optimizing pages

Page                        Size
┌ σ /                       11.6 kB
├   /_app                   751 kB
├   /_document
├   /_error                 7.3 kB
├ σ /admin                  4.3 kB
├ σ /admin/cidades          112 kB
├ σ /admin/escolas          108 kB
├ σ /admin/olimpiadas       92.1 kB
├ σ /admin/provas           4.32 kB
├ σ /admin/provas/detalhes  12.2 kB
├ σ /admin/questao          50.9 kB
├ σ /admin/questao-criar    281 kB
├ σ /admin/questao-editar   275 kB
├ σ /admin/questoes         27.6 kB
├ σ /criar_conta            47.4 kB
└ σ /login                  53.8 kB

σ  (Server)       page will be server rendered (i.e. getInitialProps)
*  (Static File)  page was prerendered as static HTML

image

After

olimat/packages/web on  next-v9.4 [$!+?] is 📦 v0.0.1 took 57s 76ms                                                                                                                                                                                  [4/27371]
➜ npm run analyze                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                               
> @olimat/[email protected] analyze /home/iqb/Code/olimat/packages/web                                                                                                                                                                                                 
> cross-env ANALYZE=true next build                                                                                                                                                                                                                            

info  - Loaded env from /home/iqb/Code/olimat/packages/web/.env
> Using external babel configuration
> Location: "/home/iqb/Code/olimat/packages/web/.babelrc"
Webpack Bundle Analyzer saved report to /home/iqb/Code/olimat/packages/web/.next/analyze/server.html
Webpack Bundle Analyzer saved report to /home/iqb/Code/olimat/packages/web/.next/analyze/client.html
Creating an optimized production build

Compiled successfully.

Warning: You have opted-out of Automatic Static Optimization due to `getInitialProps` in `pages/_app`. This does not opt-out pages with `getStaticProps`
Read more: https://err.sh/next.js/opt-out-auto-static-optimization

Automatically optimizing pages

Page                                                           Size     First Load JS
┌ λ /                                                          4.04 kB         205 kB
├   /_app                                                      22.3 kB         163 kB
├ λ /404                                                       2.57 kB         165 kB
├ λ /admin                                                     1.89 kB         206 kB
├ λ /admin/cidades                                             3.47 kB         235 kB
├ λ /admin/escolas                                             9.28 kB         239 kB
├ λ /admin/olimpiadas                                          3.2 kB          234 kB
├ λ /admin/provas                                              1.9 kB          206 kB
├ λ /admin/provas/detalhes                                     4.28 kB         209 kB
├ λ /admin/questao                                             7.97 kB         217 kB
├ λ /admin/questao-criar                                       3.06 kB         286 kB
├ λ /admin/questao-editar                                      1.19 kB         284 kB
├ λ /admin/questoes                                            7.93 kB         214 kB
├ λ /criar_conta                                               1.93 kB         195 kB
└ λ /login                                                     4.02 kB         197 kB
+ First Load JS shared by all                                  163 kB
  ├ static/pages/_app.js                                       22.3 kB
  ├ chunks/3d66764a5b09324bf2956bd19d9e5cfbf381f96a.8c5faa.js  2.5 kB
  ├ chunks/53896a911918d5eaede5e8178566376a8840e026.de0656.js  6.53 kB
  ├ chunks/7e5ac40d1d8c7fe96d55691e3cf5c27e65153880.9a0128.js  6.56 kB
  ├ chunks/c8fb7b7a52fd2a560f978d2658a6c1bfaec9093e.c58cb5.js  27.4 kB
  ├ chunks/commons.d38219.js                                   10.8 kB
  ├ chunks/df2c40bd6281b2f7f403bfb10872a09e93bb598b.c11759.js  33.7 kB
  ├ chunks/framework.66990f.js                                 45.2 kB
  ├ runtime/main.2eb73a.js                                     6.28 kB
  └ runtime/webpack.aee293.js                                  1.21 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

image

@next/bundle-analyzer files

before-and-after-bundle-analyses.zip

@iquabius iquabius merged commit bf5c66d into master Jun 19, 2020
@iquabius iquabius deleted the next-v9.4 branch June 19, 2020 21:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Upgrade Next.js to v9.0
1 participant