{"id":23457190,"url":"https://github.com/timonwa/optimising-nextjs-performance","last_synced_at":"2025-04-11T10:19:49.711Z","repository":{"id":193358987,"uuid":"688360193","full_name":"Timonwa/optimising-nextjs-performance","owner":"Timonwa","description":null,"archived":false,"fork":false,"pushed_at":"2023-09-08T16:45:30.000Z","size":22551,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T22:44:57.042Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Timonwa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-07T07:31:03.000Z","updated_at":"2023-09-07T13:39:01.000Z","dependencies_parsed_at":"2023-09-07T22:30:33.665Z","dependency_job_id":null,"html_url":"https://github.com/Timonwa/optimising-nextjs-performance","commit_stats":null,"previous_names":["timonwa/optimising-nextjs-performance"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timonwa%2Foptimising-nextjs-performance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timonwa%2Foptimising-nextjs-performance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timonwa%2Foptimising-nextjs-performance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timonwa%2Foptimising-nextjs-performance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Timonwa","download_url":"https://codeload.github.com/Timonwa/optimising-nextjs-performance/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248373354,"owners_count":21093161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-24T04:44:34.405Z","updated_at":"2025-04-11T10:19:49.679Z","avatar_url":"https://github.com/Timonwa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Optimizing build performance in Next.js :writing_hand:\n\nThis is the code example for my article on [Optimizing build performance in Next.js](https://blog.logrocket.com) for [LogRocket](https://blog.logrocket.com).\n\nVisit my blog, [Timonwa's Notes](https://blog.timonwa.com), for awesome technical content like articles, code snippets, tech goodies, community projects and more.\n\nPlease give this repo a ⭐ if it was helpful to you.\n\n## Description\n\nThis demonstration shows how optimizing your Next.js app can improve your build performance. You can access the repo on [GitHub](https://github.com/Timonwa/optimising-nextjs-performance).\n\n- The **main** branch is the optimized.\n- The **unused-dependencies** branch has some unnecessary dependencies.\n- In the **unnecessary-imports** branch, I imported unused css files into one of my pages.\n\nBy running `yarn build` on all branches, one could see a significant increase in the build size of the affected pages in the **main** branch.\n\n![main branch build size](./public/images/main-branch.png)\n_main branch build size_\n\nIn the `unused-dependencies` branch, I installed a few unnecessary dependencies like:\n\n- react-icons (I only need 1 icon; using an SVG is better)\n- react-accessible-accordion (Building a customized accordion is easy and smaller in size)\n- react-hook-form (For a simple form, this package was overkill).\n\n![unused-dependencies build size](./public/images/unused-dependencies-branch.png)\n_unused-dependencies build size_\n\nThe `Form` and `Accordion` pages on the optimized branch were increased from _844b_ to _8.416kb_, and _1.37kb_ to _4.62kb_ respectively.\n\nIn the `unnecessary-imports` branch, I imported some CSS files into the `Accordion` page that I am not using. The accordion page size increased from _1.37kb_ to _5.26kb_.\n\n![unnecessary-imports build size](./public/images/unnecessary-imports-branch.png)\n_unnecessary-imports build size_\n\nThis demo only demonstrates a few ways to optimize your Next.js app. There are other ways to optimize your Next.js app. You can read the article on [LogRocket](https://blog.logrocket.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimonwa%2Foptimising-nextjs-performance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimonwa%2Foptimising-nextjs-performance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimonwa%2Foptimising-nextjs-performance/lists"}