LLM-Assisted Incremental Migration from React to Next.js

LLM-Assisted Incremental Migration from React to Next.js | Research Square window.SnipcartSettings = { analytics: { enabled: false } }; (function() { var accessVector = localStorage.getItem('access_vector') || ''; window.dataLayer = window.dataLayer || []; if (accessVector) { window.dataLayer.push({ user: { profile: { profileInfo: { snid: accessVector } } } }); } })(); (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-K279D39R'); Browse Preprints In Review Journals COVID-19 Preprints AJE Video Bytes Research Tools Research Promotion AJE Professional Editing AJE Rubriq About Preprint Platform In Review Editorial Policies Our Team Advisory Board Help Center Sign In Submit a Preprint Cite Share Download PDF Short Report LLM-Assisted Incremental Migration from React to Next.js Nayoni Yadav, Kotha Gopi Krishna, Neelesh Thonse Rao, Sindhu D V This is a preprint; it has not been peer reviewed by a journal. https://doi.org/ 10.21203/rs.3.rs-6794167/v1 This work is licensed under a CC BY 4.0 License Status: Posted Version 1 posted You are reading this latest preprint version Abstract React’s adoption drives development of dynamic, client-rendered web applications, but many organizations now focus on the performance and SEO advantages of server-side rendering with frameworks like Next.js. For older React projects—especially those written in JavaScript, migrating to Next.js and TypeScript tends to be tedious and riddled with errors. This study investigates the possibility of using large language models (LLMs), such as Llama 3 through Ollama running on local machines, to automate crucial migration steps: transitioning from JavaScript to TypeScript and iteratively evolving React applications into Next.js applications. More than one hundred real-world test cases were developed to test TypeScript code generated by the large language model, which passed after minor adjustments. This work also investigates the extent of LLM assistance in transforming React applications into Next.js applications, particularly on routing, data fetching, and overall project design. The primary outcomes are increased developer productivity and precision in migration, demonstrating significant accuracy improvements while still addressing notable shortcomings and needs for further development. The results align with recent literature on automated code migration with LLMs and refactoring, underscoring the potential of AI-assisted web development. React Next.js JavaScript TypeScript Large Language Models LLM Llama 3 Ollama Code Migration Automated Refactoring Server-Side Rendering Frontend Modernization Test-Driven Development Code Transformation AI-Assisted Development Full Text Additional Declarations No competing interests reported. Cite Share Download PDF Status: Posted Version 1 posted You are reading this latest preprint version Research Square lets you share your work early, gain feedback from the community, and start making changes to your manuscript prior to peer review in a journal. As a division of Research Square Company, we’re committed to making research communication faster, fairer, and more useful. We do this by developing innovative software and high quality services for the global research community. Our growing team is made up of researchers and industry professionals working together to solve the most critical problems facing scientific publishing. Also discoverable on Platform About Our Team In Review Editorial Policies Advisory Board Help Center Resources Author Services Accessibility API Access RSS feed Manage Cookie Preferences © Research Square 2026 | ISSN 2693-5015 (online) Privacy Policy Terms of Service Do Not Sell My Personal Information {"props":{"pageProps":{"initialData":{"identity":"rs-6794167","acceptedTermsAndConditions":true,"allowDirectSubmit":true,"archivedVersions":[],"articleType":"Short Report","associatedPublications":[],"authors":[{"id":466894437,"identity":"0928e8e1-e3c1-4601-8742-d9574b466ee0","order_by":0,"name":"Nayoni Yadav","email":"","orcid":"","institution":"RV College of Engineering®","correspondingAuthor":false,"prefix":"","firstName":"Nayoni","middleName":"","lastName":"Yadav","suffix":""},{"id":466894438,"identity":"d2004956-1bd2-471b-8b35-a5a9eea2e356","order_by":1,"name":"Kotha Gopi Krishna","email":"","orcid":"","institution":"RV College of Engineering®","correspondingAuthor":false,"prefix":"","firstName":"Kotha","middleName":"Gopi","lastName":"Krishna","suffix":""},{"id":466894439,"identity":"281144a5-b084-4987-880c-a2a350dd4e13","order_by":2,"name":"Neelesh Thonse Rao","email":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAAyAQMAAABI0h/eAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA6UlEQVRIiWNgGAWjYHACxgMMDAdAdOMDIMnDR4weqBbmZgOQFjYStLC3SYB4BLWYszcfOPDhz518/vbGtsqvOXYybAzMDx/dwKPFsudYwsGZbc8sZ5w52HZbdlsy0GFsxsY5eLQY3MgxOMzbcNiA4UZi223JbcxALTxs0ni13H//4fCfP4cN5IFaiiW31ROh5QYPw2EGtsMGBkAtjB+3HSZCy5k0g4O9bYcNDM8cbJZm3Hach42ZkF+OH3744AfQYXLH2x9+/Lmt2p6fvfnhY3xaUAAzD5gkVjkIMP4gRfUoGAWjYBSMGAAAAK9RpHJeISEAAAAASUVORK5CYII=","orcid":"","institution":"RV College of Engineering®","correspondingAuthor":true,"prefix":"","firstName":"Neelesh","middleName":"Thonse","lastName":"Rao","suffix":""},{"id":466894440,"identity":"5ef4af7a-780b-47d1-93fc-087edf47aff9","order_by":3,"name":"Sindhu D V","email":"","orcid":"","institution":"RV College of Engineering®","correspondingAuthor":false,"prefix":"","firstName":"Sindhu","middleName":"D","lastName":"V","suffix":""}],"badges":[],"createdAt":"2025-06-01 06:53:11","currentVersionCode":1,"declarations":{"humanSubjects":false,"vertebrateSubjects":false,"conflictsOfInterestStatement":false,"humanSubjectEthicalGuidelines":false,"humanSubjectConsent":false,"humanSubjectClinicalTrial":false,"humanSubjectCaseReport":false,"vertebrateSubjectEthicalGuidelines":false},"doi":"10.21203/rs.3.rs-6794167/v1","doiUrl":"https://doi.org/10.21203/rs.3.rs-6794167/v1","draftVersion":[],"editorialEvents":[],"editorialNote":"","failedWorkflow":false,"files":[{"id":84495065,"identity":"6e69da3d-55c5-4656-b335-1184f62e107d","added_by":"auto","created_at":"2025-06-12 15:24:04","extension":"pdf","order_by":1,"title":"","display":"","copyAsset":false,"role":"manuscript-pdf","size":1032475,"visible":true,"origin":"","legend":"","description":"","filename":"paperon462025.pdf","url":"https://assets-eu.researchsquare.com/files/rs-6794167/v1_covered_dab10ed3-99aa-4d40-a203-fe5515ea404c.pdf"}],"financialInterests":"No competing interests reported.","formattedTitle":"LLM-Assisted Incremental Migration from React to Next.js","fulltext":[],"fulltextSource":"","fullText":"","funders":[],"hasAdminPriorityOnWorkflow":false,"hasManuscriptDocX":false,"hasOptedInToPreprint":true,"hasPassedJournalQc":"","hasAnyPriority":true,"hideJournal":true,"highlight":"","institution":"","isAcceptedByJournal":false,"isAuthorSuppliedPdf":true,"isDeskRejected":"","isHiddenFromSearch":false,"isInQc":false,"isInWorkflow":true,"isPdf":true,"isPdfUpToDate":true,"isWithdrawnOrRetracted":false,"journal":{"display":true,"email":"[email protected]","identity":"researchsquare","isNatureJournal":false,"hasQc":true,"allowDirectSubmit":true,"externalIdentity":"","sideBox":"","snPcode":"","submissionUrl":"/submission","title":"Research Square","twitterHandle":"researchsquare","acdcEnabled":true,"dfaEnabled":false,"editorialSystem":"","reportingPortfolio":"","inReviewEnabled":false,"inReviewRevisionsEnabled":true},"keywords":"React, Next.js, JavaScript, TypeScript, Large Language Models, LLM, Llama 3, Ollama, Code Migration, Automated Refactoring, Server-Side Rendering, Frontend Modernization, Test-Driven Development, Code Transformation, AI-Assisted Development","lastPublishedDoi":"10.21203/rs.3.rs-6794167/v1","lastPublishedDoiUrl":"https://doi.org/10.21203/rs.3.rs-6794167/v1","license":{"name":"CC BY 4.0","url":"https://creativecommons.org/licenses/by/4.0/"},"manuscriptAbstract":"React’s adoption drives development of dynamic, client-rendered web applications, but many organizations now focus on the performance and SEO advantages of server-side rendering with frameworks like Next.js. For older React projects—especially those written in JavaScript, migrating to Next.js and TypeScript tends to be tedious and riddled with errors. This study investigates the possibility of using large language models (LLMs), such as Llama 3 through Ollama running on local machines, to automate crucial migration steps: transitioning from JavaScript to TypeScript and iteratively evolving React applications into Next.js applications. More than one hundred real-world test cases were developed to test TypeScript code generated by the large language model, which passed after minor adjustments. This work also investigates the extent of LLM assistance in transforming React applications into Next.js applications, particularly on routing, data fetching, and overall project design. The primary outcomes are increased developer productivity and precision in migration, demonstrating significant accuracy improvements while still addressing notable shortcomings and needs for further development. The results align with recent literature on automated code migration with LLMs and refactoring, underscoring the potential of AI-assisted web development.","manuscriptTitle":"LLM-Assisted Incremental Migration from React to Next.js","msid":"","msnumber":"","nonDraftVersions":[{"code":1,"date":"2025-06-10 08:36:23","doi":"10.21203/rs.3.rs-6794167/v1","editorialEvents":[{"type":"communityComments","content":0}],"status":"published","journal":{"display":true,"email":"[email protected]","identity":"researchsquare","isNatureJournal":false,"hasQc":true,"allowDirectSubmit":true,"externalIdentity":"","sideBox":"","snPcode":"","submissionUrl":"/submission","title":"Research Square","twitterHandle":"researchsquare","acdcEnabled":true,"dfaEnabled":false,"editorialSystem":"","reportingPortfolio":"","inReviewEnabled":false,"inReviewRevisionsEnabled":true}}],"origin":"","ownerIdentity":"f0ef33c4-74a7-41b5-9dfd-60404a6b3b2a","owner":[],"postedDate":"June 10th, 2025","published":true,"recentEditorialEvents":[],"rejectedJournal":[],"revision":"","amendment":"","status":"posted","subjectAreas":[],"tags":[],"updatedAt":"2025-06-12T15:23:45+00:00","versionOfRecord":[],"versionCreatedAt":"2025-06-10 08:36:23","video":"","vorDoi":"","vorDoiUrl":"","workflowStages":[]},"version":"v1","identity":"rs-6794167","journalConfig":"researchsquare"},"__N_SSP":true},"page":"/article/[identity]/[[...version]]","query":{"redirect":"/article/rs-6794167","identity":"rs-6794167","version":["v1"]},"buildId":"XKTyCvWXoU3ODBz1xrDgd","isFallback":false,"isExperimentalCompile":false,"dynamicIds":[84888],"gssp":true,"scriptLoader":[]}