translate Your First Component (beta docs)

[carburo]

#500

[github-actions]

Size Changes

Details

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

One Hundred Eighty-nine Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/	54.99 KB(🟡 +58 B)	150.19 KB
/404	54.1 KB(🟡 +58 B)	149.3 KB
/apis	54.88 KB(🟡 +58 B)	150.07 KB
/apis/createcontext	56.63 KB(🟡 +58 B)	151.83 KB
/apis/reactdom	54.82 KB(🟡 +58 B)	150.01 KB
/apis/render	56.86 KB(🟡 +58 B)	152.06 KB
/apis/usecontext	62.59 KB(🟡 +58 B)	157.79 KB
/apis/usereducer	62.22 KB(🟡 +58 B)	157.42 KB
/apis/useref	59.94 KB(🟡 +58 B)	155.13 KB
/apis/usestate	65.85 KB(🟡 +58 B)	161.04 KB
/blog	41.27 KB(🟡 +3 B)	136.46 KB
/blog/2013/06/02/jsfiddle-integration	65.38 KB(🟡 +58 B)	160.58 KB
/blog/2013/06/05/why-react	67.11 KB(🟡 +58 B)	162.3 KB
/blog/2013/06/12/community-roundup	66.81 KB(🟡 +58 B)	162 KB
/blog/2013/06/19/community-roundup-2	67.48 KB(🟡 +58 B)	162.67 KB
/blog/2013/06/21/react-v0-3-3	65.53 KB(🟡 +58 B)	160.72 KB
/blog/2013/06/27/community-roundup-3	67.85 KB(🟡 +58 B)	163.04 KB
/blog/2013/07/02/react-v0-4-autobind-by-default	66.15 KB(🟡 +58 B)	161.34 KB
/blog/2013/07/03/community-roundup-4	67.21 KB(🟡 +58 B)	162.41 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values	66.02 KB(🟡 +58 B)	161.21 KB
/blog/2013/07/17/react-v0-4-0	66.73 KB(🟡 +58 B)	161.92 KB
/blog/2013/07/23/community-roundup-5	67.61 KB(🟡 +58 B)	162.8 KB
/blog/2013/07/26/react-v0-4-1	65.49 KB(🟡 +58 B)	160.69 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails	66.1 KB(🟡 +58 B)	161.29 KB
/blog/2013/08/05/community-roundup-6	66.9 KB(🟡 +58 B)	162.1 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications	66.11 KB(🟡 +58 B)	161.3 KB
/blog/2013/08/26/community-roundup-7	67.07 KB(🟡 +58 B)	162.27 KB
/blog/2013/09/24/community-roundup-8	68.5 KB(🟡 +58 B)	163.7 KB
/blog/2013/10/03/community-roundup-9	67.44 KB(🟡 +58 B)	162.63 KB
/blog/2013/10/16/react-v0.5.0	67.12 KB(🟡 +58 B)	162.32 KB
/blog/2013/10/29/react-v0-5-1	65.48 KB(🟡 +58 B)	160.68 KB
/blog/2013/11/06/community-roundup-10	69.1 KB(🟡 +58 B)	164.29 KB
/blog/2013/11/18/community-roundup-11	68.18 KB(🟡 +58 B)	163.38 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2	65.95 KB(🟡 +58 B)	161.15 KB
/blog/2013/12/19/react-v0.8.0	66.37 KB(🟡 +58 B)	161.57 KB
/blog/2013/12/23/community-roundup-12	67.83 KB(🟡 +58 B)	163.03 KB
/blog/2013/12/30/community-roundup-13	67.62 KB(🟡 +58 B)	162.81 KB
/blog/2014/01/02/react-chrome-developer-tools	65.87 KB(🟡 +58 B)	161.07 KB
/blog/2014/01/06/community-roundup-14	67.21 KB(🟡 +58 B)	162.4 KB
/blog/2014/02/05/community-roundup-15	68.43 KB(🟡 +58 B)	163.62 KB
/blog/2014/02/15/community-roundup-16	68.14 KB(🟡 +58 B)	163.33 KB
/blog/2014/02/16/react-v0.9-rc1	68.54 KB(🟡 +58 B)	163.74 KB
/blog/2014/02/20/react-v0.9	68.99 KB(🟡 +58 B)	164.18 KB
/blog/2014/02/24/community-roundup-17	67.85 KB(🟡 +58 B)	163.05 KB
/blog/2014/03/14/community-roundup-18	68.82 KB(🟡 +58 B)	164.01 KB
/blog/2014/03/19/react-v0.10-rc1	67.13 KB(🟡 +58 B)	162.32 KB
/blog/2014/03/21/react-v0.10	67.15 KB(🟡 +58 B)	162.35 KB
/blog/2014/03/28/the-road-to-1.0	67.26 KB(🟡 +58 B)	162.46 KB
/blog/2014/04/04/reactnet	65.9 KB(🟡 +58 B)	161.1 KB
/blog/2014/05/06/flux	66.03 KB(🟡 +58 B)	161.22 KB
/blog/2014/05/29/one-year-of-open-source-react	66.25 KB(🟡 +58 B)	161.45 KB
/blog/2014/06/27/community-roundup-19	67.8 KB(🟡 +58 B)	162.99 KB
/blog/2014/07/13/react-v0.11-rc1	68.18 KB(🟡 +58 B)	163.38 KB
/blog/2014/07/17/react-v0.11	69.44 KB(🟡 +58 B)	164.63 KB
/blog/2014/07/25/react-v0.11.1	66.39 KB(🟡 +58 B)	161.58 KB
/blog/2014/07/28/community-roundup-20	67.94 KB(🟡 +58 B)	163.14 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher	67.57 KB(🟡 +58 B)	162.77 KB
/blog/2014/08/03/community-roundup-21	67.61 KB(🟡 +58 B)	162.8 KB
/blog/2014/09/03/introducing-the-jsx-specification	65.61 KB(🟡 +58 B)	160.81 KB
/blog/2014/09/12/community-round-up-22	68.09 KB(🟡 +58 B)	163.28 KB
/blog/2014/09/16/react-v0.11.2	66.38 KB(🟡 +58 B)	161.58 KB
/blog/2014/09/24/testing-flux-applications	69.56 KB(🟡 +58 B)	164.76 KB
/blog/2014/10/14/introducing-react-elements	68.52 KB(🟡 +58 B)	163.71 KB
/blog/2014/10/16/react-v0.12-rc1	68.48 KB(🟡 +58 B)	163.68 KB
/blog/2014/10/17/community-roundup-23	69.06 KB(🟡 +58 B)	164.25 KB
/blog/2014/10/27/react-js-conf	65.66 KB(🟡 +58 B)	160.85 KB
/blog/2014/10/28/react-v0.12	68.43 KB(🟡 +58 B)	163.62 KB
/blog/2014/11/24/react-js-conf-updates	66.04 KB(🟡 +58 B)	161.24 KB
/blog/2014/11/25/community-roundup-24	69.28 KB(🟡 +58 B)	164.48 KB
/blog/2014/12/18/react-v0.12.2	66.07 KB(🟡 +58 B)	161.27 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship	66.47 KB(🟡 +58 B)	161.66 KB
/blog/2015/01/27/react-v0.13.0-beta-1	67.44 KB(🟡 +58 B)	162.63 KB
/blog/2015/02/18/react-conf-roundup-2015	69.42 KB(🟡 +58 B)	164.62 KB
/blog/2015/02/20/introducing-relay-and-graphql	68.57 KB(🟡 +58 B)	163.77 KB
/blog/2015/02/24/react-v0.13-rc1	67.47 KB(🟡 +58 B)	162.67 KB
/blog/2015/02/24/streamlining-react-elements	70.03 KB(🟡 +58 B)	165.22 KB
/blog/2015/03/03/react-v0.13-rc2	66.81 KB(🟡 +58 B)	162.01 KB
/blog/2015/03/04/community-roundup-25	67.77 KB(🟡 +58 B)	162.96 KB
/blog/2015/03/10/react-v0.13	68.09 KB(🟡 +58 B)	163.28 KB
/blog/2015/03/16/react-v0.13.1	65.91 KB(🟡 +58 B)	161.1 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay	68.67 KB(🟡 +58 B)	163.86 KB
/blog/2015/03/26/introducing-react-native	65.8 KB(🟡 +58 B)	161 KB
/blog/2015/03/30/community-roundup-26	67.74 KB(🟡 +58 B)	162.93 KB
/blog/2015/04/17/react-native-v0.4	66.65 KB(🟡 +58 B)	161.85 KB
/blog/2015/04/18/react-v0.13.2	65.99 KB(🟡 +58 B)	161.18 KB
/blog/2015/05/01/graphql-introduction	70.48 KB(🟡 +58 B)	165.67 KB
/blog/2015/05/08/react-v0.13.3	65.88 KB(🟡 +58 B)	161.07 KB
/blog/2015/05/22/react-native-release-process	66.03 KB(🟡 +58 B)	161.22 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools	66.48 KB(🟡 +58 B)	161.67 KB
/blog/2015/07/03/react-v0.14-beta-1	67.99 KB(🟡 +58 B)	163.19 KB
/blog/2015/08/03/new-react-devtools-beta	66.59 KB(🟡 +58 B)	161.79 KB
/blog/2015/08/11/relay-technical-preview	66.65 KB(🟡 +58 B)	161.85 KB
/blog/2015/08/13/reacteurope-roundup	68.24 KB(🟡 +58 B)	163.44 KB
/blog/2015/09/02/new-react-developer-tools	66.01 KB(🟡 +58 B)	161.2 KB
/blog/2015/09/10/react-v0.14-rc1	71.69 KB(🟡 +58 B)	166.89 KB
/blog/2015/09/14/community-roundup-27	68.17 KB(🟡 +58 B)	163.36 KB
/blog/2015/10/01/react-render-and-top-level-api	67.14 KB(🟡 +58 B)	162.33 KB
/blog/2015/10/07/react-v0.14	72.18 KB(🟡 +58 B)	167.37 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord	67.89 KB(🟡 +58 B)	163.08 KB
/blog/2015/10/28/react-v0.14.1	65.9 KB(🟡 +58 B)	161.09 KB
/blog/2015/11/02/react-v0.14.2	65.93 KB(🟡 +58 B)	161.12 KB
/blog/2015/11/18/react-v0.14.3	66.05 KB(🟡 +58 B)	161.25 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship	66.93 KB(🟡 +58 B)	162.12 KB
/blog/2015/12/16/ismounted-antipattern	66.53 KB(🟡 +58 B)	161.72 KB
/blog/2015/12/18/react-components-elements-and-instances	70.45 KB(🟡 +58 B)	165.64 KB
/blog/2015/12/29/react-v0.14.4	65.72 KB(🟡 +58 B)	160.92 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A	66.74 KB(🟡 +58 B)	161.93 KB
/blog/2016/01/12/discontinuing-ie8-support	65.55 KB(🟡 +58 B)	160.74 KB
/blog/2016/02/19/new-versioning-scheme	66.93 KB(🟡 +58 B)	162.12 KB
/blog/2016/03/07/react-v15-rc1	69.68 KB(🟡 +58 B)	164.88 KB
/blog/2016/03/16/react-v15-rc2	66.54 KB(🟡 +58 B)	161.74 KB
/blog/2016/03/29/react-v0.14.8	65.67 KB(🟡 +58 B)	160.87 KB
/blog/2016/04/07/react-v15	73.87 KB(🟡 +58 B)	169.06 KB
/blog/2016/04/08/react-v15.0.1	66.43 KB(🟡 +58 B)	161.63 KB
/blog/2016/07/11/introducing-reacts-error-code-system	66.14 KB(🟡 +58 B)	161.34 KB
/blog/2016/07/13/mixins-considered-harmful	74.3 KB(🟡 +58 B)	169.49 KB
/blog/2016/07/22/create-apps-with-no-configuration	69.63 KB(🟡 +58 B)	164.82 KB
/blog/2016/08/05/relay-state-of-the-state	69.67 KB(🟡 +58 B)	164.86 KB
/blog/2016/09/28/our-first-50000-stars	71.11 KB(🟡 +58 B)	166.31 KB
/blog/2016/11/16/react-v15.4.0	69.07 KB(🟡 +58 B)	164.26 KB
/blog/2017/04/07/react-v15.5.0	69.63 KB(🟡 +58 B)	164.82 KB
/blog/2017/05/18/whats-new-in-create-react-app	69.03 KB(🟡 +58 B)	164.22 KB
/blog/2017/06/13/react-v15.6.0	67.65 KB(🟡 +58 B)	162.84 KB
/blog/2017/07/26/error-handling-in-react-16	68 KB(🟡 +58 B)	163.19 KB
/blog/2017/09/08/dom-attributes-in-react-16	68.43 KB(🟡 +58 B)	163.62 KB
/blog/2017/09/25/react-v15.6.2	66.76 KB(🟡 +58 B)	161.96 KB
/blog/2017/09/26/react-v16.0	71.89 KB(🟡 +58 B)	167.09 KB
/blog/2017/11/28/react-v16.2.0-fragment-support	69.83 KB(🟡 +58 B)	165.02 KB
/blog/2017/12/07/introducing-the-react-rfc-process	66.34 KB(🟡 +58 B)	161.54 KB
/blog/2017/12/15/improving-the-repository-infrastructure	82.13 KB(🟡 +58 B)	177.33 KB
/blog/2018/03/01/sneak-peek-beyond-react-16	66.3 KB(🟡 +58 B)	161.5 KB
/blog/2018/03/27/update-on-async-rendering	71.54 KB(🟡 +58 B)	166.74 KB
/blog/2018/03/29/react-v-16-3	68.37 KB(🟡 +58 B)	163.56 KB
/blog/2018/05/23/react-v-16-4	68.5 KB(🟡 +58 B)	163.7 KB
/blog/2018/06/07/you-probably-dont-need-derived-state	72.16 KB(🟡 +58 B)	167.36 KB
/blog/2018/08/01/react-v-16-4-2	67.15 KB(🟡 +58 B)	162.35 KB
/blog/2018/09/10/introducing-the-react-profiler	68.76 KB(🟡 +58 B)	163.96 KB
/blog/2018/10/01/create-react-app-v2	69.24 KB(🟡 +58 B)	164.44 KB
/blog/2018/10/23/react-v-16-6	68.44 KB(🟡 +58 B)	163.64 KB
/blog/2018/11/13/react-conf-recap	66.15 KB(🟡 +58 B)	161.35 KB
/blog/2018/11/27/react-16-roadmap	72.35 KB(🟡 +58 B)	167.54 KB
/blog/2018/12/19/react-v-16-7	67.28 KB(🟡 +58 B)	162.47 KB
/blog/2019/02/06/react-v16.8.0	69.54 KB(🟡 +58 B)	164.74 KB
/blog/2019/02/23/is-react-translated-yet	69.11 KB(🟡 +58 B)	164.3 KB
/blog/2019/08/08/react-v16.9.0	72.04 KB(🟡 +58 B)	167.23 KB
/blog/2019/08/15/new-react-devtools	66.65 KB(🟡 +58 B)	161.84 KB
/blog/2019/10/22/react-release-channels	68.45 KB(🟡 +58 B)	163.65 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense	73.16 KB(🟡 +58 B)	168.35 KB
/blog/2020/02/26/react-v16.13.0	69.38 KB(🟡 +58 B)	164.58 KB
/blog/2020/08/10/react-v17-rc	75.66 KB(🟡 +58 B)	170.86 KB
/blog/all	57.27 KB(🟡 +3 B)	152.46 KB
/community	54.68 KB(🟡 +58 B)	149.88 KB
/community/acknowledgements	55.88 KB(🟡 +58 B)	151.07 KB
/community/meet-the-team	56.57 KB(🟡 +58 B)	151.76 KB
/learn	60.13 KB(🟡 +58 B)	155.32 KB
/learn/add-react-to-a-website	60.01 KB(🟡 +58 B)	155.2 KB
/learn/adding-interactivity	61.32 KB(🟡 +58 B)	156.51 KB
/learn/choosing-the-state-structure	67.05 KB(🟡 +58 B)	162.25 KB
/learn/conditional-rendering	59.28 KB(🟡 +58 B)	154.48 KB
/learn/describing-the-ui	58.79 KB(🟡 +58 B)	153.99 KB
/learn/editor-setup	56.09 KB(🟡 +58 B)	151.29 KB
/learn/escape-hatches	54.02 KB(🟡 +58 B)	149.21 KB
/learn/extracting-state-logic-into-a-reducer	64.68 KB(🟡 +58 B)	159.88 KB
/learn/importing-and-exporting-components	57.68 KB(🟡 +58 B)	152.88 KB
/learn/installation	55.51 KB(🟡 +58 B)	150.7 KB
/learn/javascript-in-jsx-with-curly-braces	57.76 KB(🟡 +58 B)	152.95 KB
/learn/keeping-components-pure	61.89 KB(🟡 +58 B)	157.09 KB
/learn/managing-state	60.62 KB(🟡 +58 B)	155.81 KB
/learn/manipulating-the-dom-with-refs	62.87 KB(🟡 +58 B)	158.07 KB
/learn/passing-data-deeply-with-context	62.41 KB(🟡 +58 B)	157.61 KB
/learn/passing-props-to-a-component	61.46 KB(🟡 +58 B)	156.66 KB
/learn/preserving-and-resetting-state	65.43 KB(🟡 +58 B)	160.62 KB
/learn/queueing-a-series-of-state-updates	59.25 KB(🟡 +58 B)	154.45 KB
/learn/react-developer-tools	55.39 KB(🟡 +58 B)	150.59 KB
/learn/reacting-to-input-with-state	63.87 KB(🟡 +58 B)	159.07 KB
/learn/referencing-values-with-refs	60.78 KB(🟡 +58 B)	155.97 KB
/learn/render-and-commit	57.75 KB(🟡 +58 B)	152.94 KB
/learn/rendering-lists	61.8 KB(🟡 +58 B)	157 KB
/learn/responding-to-events	60.8 KB(🟡 +58 B)	156 KB
/learn/scaling-up-with-reducer-and-context	58.83 KB(🟡 +58 B)	154.02 KB
/learn/sharing-state-between-components	59.54 KB(🟡 +58 B)	154.73 KB
/learn/start-a-new-react-project	56.43 KB(🟡 +58 B)	151.62 KB
/learn/state-a-components-memory	64.98 KB(🟡 +58 B)	160.17 KB
/learn/state-as-a-snapshot	58.8 KB(🟡 +58 B)	154 KB
/learn/thinking-in-react	61.22 KB(🟡 +58 B)	156.41 KB
/learn/updating-arrays-in-state	62.86 KB(🟡 +58 B)	158.05 KB
/learn/updating-objects-in-state	62.58 KB(🟡 +58 B)	157.78 KB
/learn/writing-markup-with-jsx	57.99 KB(🟡 +58 B)	153.18 KB
/learn/your-first-component	59.06 KB(🟡 +542 B)	154.26 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.