{"id":4957,"date":"2020-11-27T17:39:55","date_gmt":"2020-11-27T16:39:55","guid":{"rendered":"https:\/\/pagepro.co\/blog\/?p=4957"},"modified":"2025-02-05T10:19:49","modified_gmt":"2025-02-05T09:19:49","slug":"nextjs-vs-react","status":"publish","type":"post","link":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/","title":{"rendered":"Next.js vs Create React App: A Comparison"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"video-version\">Video version<\/h2>\n\n\n\n<p>Not in a mood for reading? Worry not! <\/p>\n\n\n\n<p>Here&#8217;s the video version!<\/p>\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube\"><div class=\"lyte-wrapper fourthree\" style=\"width:420px;max-width:100%;margin:5px;\"><div class=\"lyMe\" id=\"WYL_kTWV8IbUuyU\"><div id=\"lyte_kTWV8IbUuyU\" data-src=\"\/\/i.ytimg.com\/vi\/kTWV8IbUuyU\/hqdefault.jpg\" class=\"pL\"><div class=\"tC\"><div class=\"tT\"><\/div><\/div><div class=\"play\"><\/div><div class=\"ctrl\"><div class=\"Lctrl\"><\/div><div class=\"Rctrl\"><\/div><\/div><\/div><noscript><a href=\"https:\/\/youtu.be\/kTWV8IbUuyU\" rel=\"nofollow\"><img src=\"https:\/\/i.ytimg.com\/vi\/kTWV8IbUuyU\/0.jpg\" alt=\"\" width=\"420\" height=\"295\" \/><br \/>Watch this video on YouTube<\/a><\/noscript><\/div><\/div><div class=\"lL\" style=\"max-width:100%;width:420px;margin:5px;\"><\/div><figcaption><\/figcaption><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"server-side-rendering-ssr-vs-client-side-rendering-csr\">Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)<\/h2>\n\n\n\n<p>If you want to build a <a href=\"https:\/\/pagepro.co\/services\/reactjs-development\" target=\"_blank\" rel=\"noreferrer noopener\">React app<\/a>, you can use two tools to start: Next.js and Create-React-App.<\/p>\n\n\n\n<p>Next.js is becoming more and more popular, as it&#8217;s a framework that enables you to use both Server-Side Rendering (SSR) with the option of supporting <a href=\"https:\/\/pagepro.co\/blog\/how-to-use-next-js-static-site-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\">Static Site Generation (SSG)<\/a>.<\/p>\n\n\n\n<p>On the other hand, Create-React-App is a Client-Side Rendering tool.<\/p>\n\n\n\n<p>Let&#8217;s have a closer look at both of them and try to compare how those two different rendering options can impact your app performance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-react-app-cra\">Create React App (CRA)<\/h2>\n\n\n\n<p>If you are just starting out with React, Create React App is a great way to learn it. CRA will also give you a head start if you want to use React to build a <a href=\"https:\/\/pagepro.co\/services\/web-app-development\" target=\"_blank\" rel=\"noreferrer noopener\">single-page application (SPA)<\/a>.<\/p>\n\n\n\n<p><strong>Thanks to the development environment created by Create React App:<\/strong><\/p>\n\n\n\n<ul>\n<li>You can use the latest JavaScript features<\/li>\n\n\n\n<li>You will have a great DX (developer experience)<\/li>\n\n\n\n<li>Your app is optimized for production usage<\/li>\n<\/ul>\n\n\n\n<p>You\u2019ll need to have Node \u2265 8.10 and npm \u2265 5.6 on your machine.&nbsp;<\/p>\n\n\n\n<p>Because Create React App is just responsible for creating a front-end build, you can use it with a back-end of your choice like <a href=\"https:\/\/pagepro.co\/services\/nodejs-development\" target=\"_blank\" rel=\"noreferrer noopener\">Node<\/a>. You should also know that CRA uses Babel and Webpack under the hood but don\u2019t worry, no knowledge of them is required.<\/p>\n\n\n\n<p>In other words, CRA is a tool that saves you from the time-consuming setup and configuration of the development environment. All you need to do is run one command which will set up the tools needed for React project to start. So instead of wasting time on configuration, you can focus on building an app right away.<\/p>\n\n\n\n<p>If you want to learn more about Create React App, check its <a href=\"https:\/\/github.com\/facebook\/create-react-app\/blob\/master\/README.md\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">README<\/a> and the <a href=\"https:\/\/facebook.github.io\/create-react-app\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">User Guide<\/a>.<\/p>\n\n\n\n<p>However, it won\u2019t be enough to build performant production-ready apps. There are more things to take into consideration like SEO or increasing performance. For the first one, you might need server-side rendering, and for the latter code-splitting.<\/p>\n\n\n\n<p>To achieve these goals, you can either use a boilerplate like <a href=\"https:\/\/www.reactmilkshake.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React Milkshake<\/a> or a framework based on React like <a href=\"https:\/\/pagepro.co\/services\/nextjs-development\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"advantages-of-using-create-react-app\"><span class=\"underline-accent\">Advantages of using Create-React-App<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"it-gives-you-freedom\">It gives you freedom.<\/h4>\n\n\n\n<p>What almost each <a href=\"https:\/\/pagepro.co\/services\/reactjs-development\" target=\"_blank\" rel=\"noreferrer noopener\">React.js development company<\/a> brings out as the main advantage is that there&#8217;s no more need for using a particular library \u2013 Create React App gives you the possibility to choose whatever routing library you want. Also, if you want to use, let\u2019s say, TypeScript, it&#8217;s possible thanks to templates.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"support-for-rendering-on-the-client-side\">Support for rendering on the client side.<\/h4>\n\n\n\n<p>Because of client-side rendering, deployment becomes easy because such apps are easier to work with. What\u2019s great is that you can use any hosting, i.e. Amazon S3.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"disadvantages-of-create-react-app\"><span class=\"underline-accent\">Disadvantages of Create-React-App<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"its-not-easy-to-customise\">It\u2019s not easy to customise.<\/h4>\n\n\n\n<p>Customisation means additional effort because there is no built-in way to do that. If you are thinking about modifying the configuration of Webpack, you need a third-party tool like craco or eject. However, there is a cost to such a solution \u2013 at the moment of the ejection, you lose future support.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"its-limiting\">It\u2019s limiting.<\/h4>\n\n\n\n<p>If you want something out-of-the-box, something that CRA doesn\u2019t support by default, well, it gets messy. The lack of necessity to configure Babel and Webpack is a reason that\u2019s easy to get started, but on the other hand, developers don\u2019t know how to use these tools. Therefore, it complicates customization.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"it-doesnt-support-seo\">It doesn&#8217;t support SEO<\/h4>\n\n\n\n<p>Applications that are being rendered on the client side \u2013 including those built with Create React App \u2013 are bad for SEO so it\u2019s not a great solution for the e-commerce industry or marketing goals. However, it also depends strongly on the other tools of your choice.<\/p>\n\n\n\n<div class=\"wp-block-code-mind-cta c-cta-block\" style=\"background-color:#00141F;color:#FFFFFF\"><div class=\"c-cta-block__content\"><p class=\"c-cta-block__title\">NOT SURE WHICH ONE TO CHOOSE?<\/p><div class=\"c-cta-block__action\"><a href=\"https:\/\/pagepro.co\/consultation\" class=\"c-cta-block__button ga-cta ga-cta-consultation theme-bg-3\">SCHEDULE A FREE CALL WITH OUR EXPERT. <\/a><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-next-js\">What is Next.js<\/h2>\n\n\n\n<p><strong><a href=\"https:\/\/pagepro.co\/blog\/what-is-nextjs\/\">Next.js<\/a><\/strong> is an open-source framework based on Node.js and Babel built by Vercel. It uses the benefits of React to help developers build single-page applications. Contrary to Create React App, it supports server-side rendering.<\/p>\n\n\n\n<p><strong>Next.js features:<\/strong><\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/pagepro.co\/blog\/ssrvscsr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Server-Side Rendering<\/a> (SSR)<\/li>\n\n\n\n<li><a href=\"https:\/\/pagepro.co\/blog\/how-to-use-next-js-static-site-generator\/\">Static site generation<\/a> (SSG)<\/li>\n\n\n\n<li>Pre-rendering<\/li>\n\n\n\n<li>Automatic build size optimization<\/li>\n\n\n\n<li>Faster development compilation<\/li>\n<\/ul>\n\n\n\n<p>All these features help you with building a highly-performance and production-ready app.<\/p>\n\n\n\n<p>There are two more worth-mentioning things \u2013 Next.js offers great documentation and is gaining popularity within the programming world.<\/p>\n\n\n\n<p>However, even those things don\u2019t make Next.js a one-fits-all solution.<\/p>\n\n\n\n<p>Sure, server-side rendering becomes much easier thanks to that but it also causes some troubles. Every server-rendered route needs a serverless function and because the free limit of such functions is 12, you may need to pay for hosting if this amount exceeds the number of 12.<\/p>\n\n\n\n<p>On the contrary, if you are using Create React App, you can be sure that you won\u2019t pay for hosting on platforms like Vercel, Netlify or Render.<\/p>\n\n\n<div class=\"c-newsletter-sendgrid-wrapper js-newsletter-sendgrid-wrapper ga-filedownload-viewed\">\n    <div class=\"c-newsletter-sendgrid\">\n                    <p class=\"c-newsletter-sendgrid__title\">\n                Next js Hosting Cost Optimization: Exclusive Expert Sessions            <\/p>\n        \n         \n            <p class=\"c-newsletter-sendgrid__description\">\n                Join the expert sessions to forecast and reduce hosting costs effectively.<br \/>\r\nNext session: February 20th, 11 am EST            <\/p>\n        \n        <form action=\"\" class=\"c-newsletter-sendgrid__form f-form js-newsletter-sendgrid\" data-key=\"28381e05-8aba-4690-ad92-3399dfafcde4\">\n            <div class=\"c-newsletter-sendgrid__form-mail\">\n                <label class=\"c-label\" for=\"newsletter_email\">Company E-mail address<\/label>\n                <input class=\"c-input js-newsletter-sendgrid-email\" type=\"email\" id=\"newsletter_email\" required>\n                <input class=\"c-newsletter-sendgrid__button ga-cta-filedownload\" type=\"submit\" value=\"Save Your Spot\">\n            <\/div>\n            <div class=\"c-newsletter-sendgrid__form-consent\">\n                                                        <input class=\"c-checkbox js-newsletter-consent\" type=\"checkbox\" name=\"newsletter_consent\" id=\"newsletter_consent_1\" required>\n                    <label class=\"c-label\" for=\"newsletter_consent_1\">I accept the Privacy Policy and agree to process my personal data by Pagepro for marketing purposes.<\/label>\n                            <\/div>\n        <\/form>\n\n        <div class=\"c-newsletter-sendgrid__cover-container\">\n                            <img decoding=\"async\" class=\"c-newsletter-sendgrid__cover-1\" src=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2024\/12\/Expert-session-Next-js-hosting-cost-optimization-1.png\" alt=\"Bold black text reads How to host Next JS for less above a large black Next.js 14 logo on a white geometric background.\" >\n                                            <\/div>\n\n        <div class=\"c-newsletter-sendgrid__popup-wrapper js-newsletter-sendgrid-popup is-hidden\">\n            <div class=\"c-newsletter-sendgrid__popup\">\n                <div class=\"c-newsletter-sendgrid__popup-icon\">\n                    <svg width=\"140\" height=\"140\" viewBox=\"0 0 140 140\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <g clip-path=\"url(#clip0_6621_2135)\">\n                    <path d=\"M65.625 100.625C65.625 109.908 69.3125 118.81 75.8763 125.374C82.44 131.938 91.3424 135.625 100.625 135.625C109.908 135.625 118.81 131.938 125.374 125.374C131.938 118.81 135.625 109.908 135.625 100.625C135.625 91.3424 131.938 82.44 125.374 75.8763C118.81 69.3125 109.908 65.625 100.625 65.625C91.3424 65.625 82.44 69.3125 75.8763 75.8763C69.3125 82.44 65.625 91.3424 65.625 100.625Z\" stroke=\"#0A2B3D\" stroke-width=\"8.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <path d=\"M116.223 90.4517L99.2774 113.044C98.9005 113.545 98.4206 113.959 97.8701 114.259C97.3196 114.558 96.7113 114.737 96.0862 114.781C95.461 114.826 94.8335 114.736 94.246 114.518C93.6584 114.3 93.1244 113.959 92.6799 113.517L83.9299 104.767\" stroke=\"#0A2B3D\" stroke-width=\"8.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <path d=\"M48.125 91.875H13.125C10.8044 91.875 8.57876 90.9531 6.93782 89.3122C5.29687 87.6712 4.375 85.4456 4.375 83.125V13.125C4.375 10.8044 5.29687 8.57876 6.93782 6.93782C8.57876 5.29687 10.8044 4.375 13.125 4.375H118.125C120.446 4.375 122.671 5.29687 124.312 6.93782C125.953 8.57876 126.875 10.8044 126.875 13.125V52.5\" stroke=\"#0A2B3D\" stroke-width=\"8.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <path d=\"M124.898 7.5835L77.3909 44.1235C74.0176 46.7185 69.881 48.1255 65.625 48.1255C61.3691 48.1255 57.2325 46.7185 53.8592 44.1235L6.35254 7.5835\" stroke=\"#0A2B3D\" stroke-width=\"8.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/g>\n                    <defs>\n                    <clipPath id=\"clip0_6621_2135\">\n                    <rect width=\"140\" height=\"140\" fill=\"white\"\/>\n                    <\/clipPath>\n                    <\/defs>\n                    <\/svg>\n                <\/div>\n                                <div class=\"c-newsletter-sendgrid__popup-action\">\n                    <button class=\"c-newsletter-sendgrid__button c-newsletter-sendgrid__button--full-width js-newsletter-sendgrid-popup-close\">Close<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"advantages-of-using-next-js\"><span class=\"underline-accent\">Advantages of using Next.js<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"it-is-blazingly-fast\">It is blazingly fast.<\/h4>\n\n\n\n<p>Applications created with Next.js are blazingly fast because of static-site generation and server-side rendering. They are performant by default because of many performance-optimising features like Image Optimisation introduced together with Next 10.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"deployment-is-easy\">Deployment is easy.<\/h4>\n\n\n\n<p>One of the goals of Vercel, a company that created Next.js, was to make the deployment of React applications as easy as possible. And they achieved it \u2013 you are just a few clicks away from getting deployment ready.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"possibility-to-use-api-routes\">Possibility to use API Routes.<\/h4>\n\n\n\n<p>If you want to connect your application with third-party APIs, usually you will need your own API and Next.js makes it easy to create. In short, Next.js offers API routes that will do the job.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"customisation-is-easy\">Customisation is easy.<\/h4>\n\n\n\n<p>While customisation is hard with CRA, Next.js makes it easier by giving the possibility to add Webpack loaders or Babel plugins.<\/p>\n\n\n\n<div class=\"c-newsletter-block-acf\">\n    <p class=\"c-newsletter-block-acf__title c-newsletter__header\">\n        EXPERT INSIGHTS, FRICTIONLESSLY DELIVERED!     <\/p>\n    <p class=\"c-newsletter-block-acf__desc c-newsletter__header\">\n        Curated tech news delivered straight to your inbox every month.\r\n    <\/p>\n    <form method=\"post\" class=\"c-newsletter-block-acf__form js-newsletter-form c-newsletter__action\" name=\"newsletter-block-form\">\n        <input name=\"newsletter-email\" id=\"newsletter-email\" type=\"text\" class=\"c-newsletter-block-acf__input js-newsletter-input\" placeholder=\"Company Email\" \/>\n        <input name=\"newsletter-campaign\" id=\"newsletter-campaign\" type=\"hidden\" value=\"\" \/>\n        <div class=\"c-newsletter-block-acf__group\">\n            <input name=\"consent\" id=\"consent\" type=\"checkbox\" class=\"js-newsletter-consent\" \/>\n            <label class=\"c-newsletter-block-acf__label\" for=\"consent\">I accept the <a href=\"https:\/\/pagepro.co\/privacy-policy\">Privacy Policy<\/a> and agree to process my personal data by Pagepro for marketing purposes.<\/label>\n        <\/div>\n        <input type=\"submit\" class=\"c-newsletter-block-acf__button button js-newsletter-sub ga-newsletter-form-content\" value=\"Sign up\" \/>\n        <p class=\"theme-size-1 js-message-valid is-hidden is-invalid\"><\/p>\n    <\/form>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"disadvantages-of-using-next-js\"><span class=\"underline-accent\">Disadvantages of using Next.js<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"its-opinionated\">It\u2019s opinionated.<\/h4>\n\n\n\n<p>Since Next.js is limited to using only its file-based router, you can\u2019t modify the way it deals with routes. Going further, you need Node.js server to use dynamic routes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"785\" src=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/07\/nextjs-vs-create-react-app-1024x785.png\" alt=\"a table with pros and cons of using Next.js and create-react-app\" class=\"wp-image-7783\" srcset=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/07\/nextjs-vs-create-react-app-1024x785.png 1024w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/07\/nextjs-vs-create-react-app-300x230.png 300w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/07\/nextjs-vs-create-react-app-768x588.png 768w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/07\/nextjs-vs-create-react-app-436x334.png 436w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/07\/nextjs-vs-create-react-app-324x248.png 324w, https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2021\/07\/nextjs-vs-create-react-app.png 1518w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Read more about the pros and cons of Next.JS <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"when-to-use-next-js\"><span class=\"underline-accent\">When to use Next.js?<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"to-build-a-landing-page\">To build a landing page.<\/h4>\n\n\n\n<p>Next.js is loved by marketers who gladly use it to create landing pages or other marketing-focused pages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"when-seo-matters\">When SEO matters.<\/h4>\n\n\n\n<p>If you want to build or currently have an online store, you must be aware that SEO matters and can give you a competitive advantage. And thanks to its speed, server-side rendering and special features, Next.js is the first choice for many when it comes to getting more organic traffic.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"to-build-marketing-websites\">To build marketing websites.<\/h4>\n\n\n\n<p>Because our application will be rendered on the server, load times can improve significantly. Especially in those cases where visitors use slower devices.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"to-build-a-ecommerce-webshop\">To build a eCommerce webshop.<\/h4>\n\n\n\n<p>A few weeks ago Next JS, released a mighty <a href=\"https:\/\/nextjs.org\/commerce\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">eCommerce starter kit<\/a> that allows you to build high-performance, user and Google-friendly webshops. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"when-to-use-create-react-app\"><span class=\"underline-accent\">When to use Create-React-App?<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"to-build-a-gated-application\">To build a gated application.<\/h4>\n\n\n\n<p>Think about your future application. If it will be available only for those who are authenticated, server-side rendering is not that necessary. Apps that are using client-side rendering will be not only easier to host but also cheaper.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"to-build-web-applications\">To build web applications.<\/h4>\n\n\n\n<p>If you want to build an application, it will be used mainly by returning visitors. In such a case, server-side rendering isn\u2019t a must because we can use caching to achieve good load times with less effort.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"comparison-of-static-site-generators\">Comparison of Static Site Generators<\/h2>\n\n\n\n<p>If you want to choose Next.js because of its Static Site Generation support, we also recommend you to have a look at a different comparison: <a href=\"https:\/\/pagepro.co\/blog\/nextjs-vs-gatsbyjs-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js vs Gatsby.js<\/a>.<\/p>\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube\"><div class=\"lyte-wrapper fourthree\" style=\"width:420px;max-width:100%;margin:5px;\"><div class=\"lyMe\" id=\"WYL_jet2J0BOSdA\"><div id=\"lyte_jet2J0BOSdA\" data-src=\"\/\/i.ytimg.com\/vi\/jet2J0BOSdA\/hqdefault.jpg\" class=\"pL\"><div class=\"tC\"><div class=\"tT\"><\/div><\/div><div class=\"play\"><\/div><div class=\"ctrl\"><div class=\"Lctrl\"><\/div><div class=\"Rctrl\"><\/div><\/div><\/div><noscript><a href=\"https:\/\/youtu.be\/jet2J0BOSdA\" rel=\"nofollow\"><img src=\"https:\/\/i.ytimg.com\/vi\/jet2J0BOSdA\/0.jpg\" alt=\"\" width=\"420\" height=\"295\" \/><br \/>Watch this video on YouTube<\/a><\/noscript><\/div><\/div><div class=\"lL\" style=\"max-width:100%;width:420px;margin:5px;\"><\/div><figcaption><\/figcaption><\/figure>\n\n\n<div class=\"wp-block-code-mind-cta c-cta-block\" style=\"background-color:#00141F;color:#FFFFFF\"><div class=\"c-cta-block__content\"><p class=\"c-cta-block__title\">Still hesitating?<\/p><div class=\"c-cta-block__action\"><a href=\"https:\/\/pagepro.co\/consultation\" class=\"c-cta-block__button ga-cta ga-cta-consultation theme-bg-3\">Ask our expert! It&#8217;s free!<\/a><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Building any application is a challenge itself, but modern technologies can make the development process a bit less painful. Thanks to them, you can focus on your business objectives.<\/p>\n<p>To make your choice of these technologies easier, once in a while we take a closer look at them in our blog posts. Our goal is to help you make a good decision on what to use in what case.<\/p>\n<p>This time, let\u2019s take a look at Create React App (CRA) vs Next.js.<\/p>\n","protected":false},"author":25,"featured_media":8101,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[84],"tags":[77,331,360],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Next.js vs Create React App: A Comparison - Pagepro<\/title>\n<meta name=\"description\" content=\"Read this short comparison we prepared to decide between using Create React App vs Next.js to build your next React application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js vs Create React App: A Comparison - Pagepro\" \/>\n<meta property=\"og:description\" content=\"Read this short comparison we prepared to decide between using Create React App vs Next.js to build your next React application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Pagepro\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/thisispagepro\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-27T16:39:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-05T09:19:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2020\/11\/nextjs-vs-CRA.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"682\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daniel Ni\u017cy\u0144ski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Ni\u017cy\u0144ski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/\"},\"author\":{\"name\":\"Daniel Ni\u017cy\u0144ski\",\"@id\":\"https:\/\/pagepro.co\/blog\/#\/schema\/person\/adda50101116bf3d52a8e51025bcdae5\"},\"headline\":\"Next.js vs Create React App: A Comparison\",\"datePublished\":\"2020-11-27T16:39:55+00:00\",\"dateModified\":\"2025-02-05T09:19:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/\"},\"wordCount\":1309,\"publisher\":{\"@id\":\"https:\/\/pagepro.co\/blog\/#organization\"},\"keywords\":[\"comparison\",\"create-react-app\",\"next.js\"],\"articleSection\":[\"React JS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/\",\"url\":\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/\",\"name\":\"Next.js vs Create React App: A Comparison - Pagepro\",\"isPartOf\":{\"@id\":\"https:\/\/pagepro.co\/blog\/#website\"},\"datePublished\":\"2020-11-27T16:39:55+00:00\",\"dateModified\":\"2025-02-05T09:19:49+00:00\",\"description\":\"Read this short comparison we prepared to decide between using Create React App vs Next.js to build your next React application.\",\"breadcrumb\":{\"@id\":\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/pagepro.co\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/pagepro.co\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Next.js vs Create React App: A Comparison\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pagepro.co\/blog\/#website\",\"url\":\"https:\/\/pagepro.co\/blog\/\",\"name\":\"Pagepro\",\"description\":\"Frictionless Next.js, Expo &amp; Sanity Development Blog\",\"publisher\":{\"@id\":\"https:\/\/pagepro.co\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pagepro.co\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/pagepro.co\/blog\/#organization\",\"name\":\"Pagepro\",\"url\":\"https:\/\/pagepro.co\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pagepro.co\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2020\/08\/logo_pagepro-b66d228a1e-1.png\",\"contentUrl\":\"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2020\/08\/logo_pagepro-b66d228a1e-1.png\",\"width\":440,\"height\":200,\"caption\":\"Pagepro\"},\"image\":{\"@id\":\"https:\/\/pagepro.co\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/thisispagepro\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/pagepro.co\/blog\/#\/schema\/person\/adda50101116bf3d52a8e51025bcdae5\",\"name\":\"Daniel Ni\u017cy\u0144ski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pagepro.co\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/11727fdea6dc32190fcfb2f7a4ec8d9d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/11727fdea6dc32190fcfb2f7a4ec8d9d?s=96&d=mm&r=g\",\"caption\":\"Daniel Ni\u017cy\u0144ski\"},\"description\":\"Daniel is a distinguished Senior React Native Developer at Pagepro, renowned for his exceptional problem-solving skills and proactive approach. His journey in mobile app development is marked by a series of successfully tackled challenges, where he has consistently resolved some of the most intricate issues in mobile app development.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/daniel-ni\u017cy\u0144ski-17322a1b3\/\"],\"url\":\"https:\/\/pagepro.co\/blog\/author\/daniel_nizynski\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Next.js vs Create React App: A Comparison - Pagepro","description":"Read this short comparison we prepared to decide between using Create React App vs Next.js to build your next React application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/","og_locale":"en_US","og_type":"article","og_title":"Next.js vs Create React App: A Comparison - Pagepro","og_description":"Read this short comparison we prepared to decide between using Create React App vs Next.js to build your next React application.","og_url":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/","og_site_name":"Pagepro","article_publisher":"https:\/\/www.facebook.com\/thisispagepro","article_published_time":"2020-11-27T16:39:55+00:00","article_modified_time":"2025-02-05T09:19:49+00:00","og_image":[{"width":1200,"height":682,"url":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2020\/11\/nextjs-vs-CRA.png","type":"image\/png"}],"author":"Daniel Ni\u017cy\u0144ski","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Daniel Ni\u017cy\u0144ski","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/#article","isPartOf":{"@id":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/"},"author":{"name":"Daniel Ni\u017cy\u0144ski","@id":"https:\/\/pagepro.co\/blog\/#\/schema\/person\/adda50101116bf3d52a8e51025bcdae5"},"headline":"Next.js vs Create React App: A Comparison","datePublished":"2020-11-27T16:39:55+00:00","dateModified":"2025-02-05T09:19:49+00:00","mainEntityOfPage":{"@id":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/"},"wordCount":1309,"publisher":{"@id":"https:\/\/pagepro.co\/blog\/#organization"},"keywords":["comparison","create-react-app","next.js"],"articleSection":["React JS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/","url":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/","name":"Next.js vs Create React App: A Comparison - Pagepro","isPartOf":{"@id":"https:\/\/pagepro.co\/blog\/#website"},"datePublished":"2020-11-27T16:39:55+00:00","dateModified":"2025-02-05T09:19:49+00:00","description":"Read this short comparison we prepared to decide between using Create React App vs Next.js to build your next React application.","breadcrumb":{"@id":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pagepro.co\/blog\/nextjs-vs-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pagepro.co\/blog\/nextjs-vs-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pagepro.co\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/pagepro.co\/blog\/"},{"@type":"ListItem","position":3,"name":"Next.js vs Create React App: A Comparison"}]},{"@type":"WebSite","@id":"https:\/\/pagepro.co\/blog\/#website","url":"https:\/\/pagepro.co\/blog\/","name":"Pagepro","description":"Frictionless Next.js, Expo &amp; Sanity Development Blog","publisher":{"@id":"https:\/\/pagepro.co\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pagepro.co\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pagepro.co\/blog\/#organization","name":"Pagepro","url":"https:\/\/pagepro.co\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pagepro.co\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2020\/08\/logo_pagepro-b66d228a1e-1.png","contentUrl":"https:\/\/pagepro.co\/blog\/wp-content\/uploads\/2020\/08\/logo_pagepro-b66d228a1e-1.png","width":440,"height":200,"caption":"Pagepro"},"image":{"@id":"https:\/\/pagepro.co\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/thisispagepro"]},{"@type":"Person","@id":"https:\/\/pagepro.co\/blog\/#\/schema\/person\/adda50101116bf3d52a8e51025bcdae5","name":"Daniel Ni\u017cy\u0144ski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pagepro.co\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/11727fdea6dc32190fcfb2f7a4ec8d9d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/11727fdea6dc32190fcfb2f7a4ec8d9d?s=96&d=mm&r=g","caption":"Daniel Ni\u017cy\u0144ski"},"description":"Daniel is a distinguished Senior React Native Developer at Pagepro, renowned for his exceptional problem-solving skills and proactive approach. His journey in mobile app development is marked by a series of successfully tackled challenges, where he has consistently resolved some of the most intricate issues in mobile app development.","sameAs":["https:\/\/www.linkedin.com\/in\/daniel-ni\u017cy\u0144ski-17322a1b3\/"],"url":"https:\/\/pagepro.co\/blog\/author\/daniel_nizynski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/posts\/4957"}],"collection":[{"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/comments?post=4957"}],"version-history":[{"count":35,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/posts\/4957\/revisions"}],"predecessor-version":[{"id":18826,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/posts\/4957\/revisions\/18826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/media\/8101"}],"wp:attachment":[{"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/media?parent=4957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/categories?post=4957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pagepro.co\/blog\/wp-json\/wp\/v2\/tags?post=4957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}