{"id":13630472,"url":"https://github.com/mgechev/guess-next","last_synced_at":"2025-04-05T15:08:28.522Z","repository":{"id":33918923,"uuid":"146528177","full_name":"mgechev/guess-next","owner":"mgechev","description":"🔮 Demo application showing the integration of Guess.js with Next.js","archived":false,"fork":false,"pushed_at":"2023-01-04T11:20:42.000Z","size":2779,"stargazers_count":525,"open_issues_count":15,"forks_count":8,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-29T06:48:30.920Z","etag":null,"topics":["guess-js","ml","next-js","predictive-prefetching","web-performance"],"latest_commit_sha":null,"homepage":"https://guess-mzwkathwpv.now.sh/","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/mgechev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-29T01:31:53.000Z","updated_at":"2025-02-11T15:50:42.000Z","dependencies_parsed_at":"2023-01-15T03:21:07.519Z","dependency_job_id":null,"html_url":"https://github.com/mgechev/guess-next","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgechev%2Fguess-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgechev%2Fguess-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgechev%2Fguess-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgechev%2Fguess-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mgechev","download_url":"https://codeload.github.com/mgechev/guess-next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353746,"owners_count":20925329,"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":["guess-js","ml","next-js","predictive-prefetching","web-performance"],"created_at":"2024-08-01T22:01:44.285Z","updated_at":"2025-04-05T15:08:28.498Z","avatar_url":"https://github.com/mgechev.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 🔮 Guess.js + Next.js\n\n**[Guess.js](https://github.com/guess-js/guess) is a collection of libraries \u0026 tools for enabling data-driven user-experience on the web.**\n\nIn this particular example, we combine Guess.js with Next.js to introduce predictive prefetching of JavaScript bundles. Based on user navigation patterns collected from Google Analytics or other source, Guess.js builds a machine-learning model to predict and prefetch JavaScript that will be required in each subsequent page.\n\nBased on early benchmarks, this can improve the perceived page load performance with 20%.\n\nFor more information on Guess.js, take a look at the following links:\n* [Google I/O announcement](https://www.youtube.com/watch?time_continue=2093\u0026v=Mv-l3-tJgGk) by Addy Osmani\n* [Introducing Guess.js - a toolkit for enabling data-driven user-experiences on the Web](https://blog.mgechev.com/2018/05/09/introducing-guess-js-data-driven-user-experiences-web/)\n* [Using Guess.js with static sites](https://github.com/guess-js/guess/tree/master/experiments/guess-static-sites)\n* [Using Guess.js with Angular, React, and Gatsby](https://github.com/guess-js/guess/tree/master/packages/guess-webpack)\n\n## Usage\n\nHere's how you can try the demo:\n\n```bash\ngit clone git@github.com:mgechev/guess-next\ncd guess-next \u0026\u0026 npm i\nnpm run build \u0026\u0026 npm start\n```\n\n![Demo](/assets/guess-next-large.gif)\n\n## Integration\n\nGuess.js (**0.1.5 and above**) works with Next.js with only two points of integration. All you need to do is add the `GuessPlugin` to `next.config.js` and introduce a snippet for prefetching the pages which are likely to be visited next.\n\nThe following sections describe both points in details.\n\n### Webpack Config\n\nAll you need is to extend the webpack config of your Next.js application is to add the `GuessPlugin` to `next.config.js` file, located in the root of your project. If the file does not exist, create it and add the following content:\n\n```ts\nconst { GuessPlugin } = require('guess-webpack');\n\nmodule.exports = {\n  webpack: function(config, { isServer }) {\n    if (isServer) return config;\n    config.plugins.push(\n      new GuessPlugin({\n        GA: 'XXXXXX'\n      })\n    );\n    return config;\n  }\n};\n```\n\nWe set the value of the `webpack` property of the object literal we set as value to `module.exports`. We set it to a function which alters the `GuessPlugin` to the `config.plugins` array. Notice that we check if Next.js has invoked webpack on the server and we return.\n\nAs a value of the `GA` property, we set a Google Analytics View ID. At build time, Guess.js will open a browser and try to get read-only access to extract a report and use it for the predictive analytics.\n\n*Note that Google Analytics is not the only provider you can use to provide the user navigation report that Guess.js uses. In this example application we provide the report from a JSON file.*\n\n### Prefetch Pages\n\nThe final piece of the integration is performing the actual prefetching. In your layout component (see `components/layout.js`) add:\n\n```ts\nimport { guess } from 'guess-webpack/api';\n\n// ...\n\n  if (typeof window !== 'undefined') {\n    Object.keys(guess()).forEach(p =\u003e router.prefetch(p));\n  }\n\n// ...\n```\n\nKeep in mind that we check if `window` is `\"undefined\"`. This is required because we don't want to run Guess.js on the server. When we invoke `guess()`, we'll return a set of routes where each route will have an associated probability for the user to visit it.\n\nThe routes that `guess()` returns depend on the Google Analytics report that it has extracted, together with the user's effective connection type.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgechev%2Fguess-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmgechev%2Fguess-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgechev%2Fguess-next/lists"}