{"id":126,"date":"2025-04-04T15:52:56","date_gmt":"2025-04-04T15:52:56","guid":{"rendered":"https:\/\/172.16.11.15\/?page_id=126"},"modified":"2025-04-08T18:11:50","modified_gmt":"2025-04-08T17:11:50","slug":"react","status":"publish","type":"page","link":"https:\/\/7zeros.com\/?page_id=126","title":{"rendered":"React"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Next.js &#8211; The React Framework for the Web<\/h2>\n\n\n\n<p><a href=\"https:\/\/nextjs.org\">https:\/\/nextjs.org<\/a><\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prerequisites<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/nodejs.org\" data-type=\"link\" data-id=\"https:\/\/nodejs.org\">Node.js 18.18<\/a> or later<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Create a new app<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-next-app@latest<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Create Frontend Directories<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>cd myapp\/src\/\nmkdir components\ncd components\/\nmkdir ui<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Test &#8211; Run the development server<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>cd my-app\/<\/code><\/li>\n\n\n\n<li>Run <code>npm run dev<\/code> to start the development server.<\/li>\n\n\n\n<li>Visit <code>http:\/\/localhost:3000<\/code> to view your application.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Install Backend Dependencies<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>cd my-app\/\nnpm install express dotenv cors node-fetch<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Express.js &#8211; framework for backend<\/li>\n\n\n\n<li>dotenv &#8211; for environment variables<\/li>\n\n\n\n<li>cors &#8211; for handling CORS<\/li>\n\n\n\n<li>node-fetch &#8211; to make HTTP requests<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Create Backend Server Directory and Files<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>mkdir server\ncd server\/\ntouch index.js\ntouch &lt;some-name&gt;.env\ntouch &lt;some-name&gt;.gitignore<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Configure Express Backend (<\/strong>index.js<strong>) and Environment Variables (<\/strong>.env<strong>)<\/strong><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Run Backend<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>node server\/index.js<\/code><\/pre>\n\n\n\n<p>http:\/\/localhost:4000<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Run Frontend<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev<\/code><\/pre>\n\n\n\n<p>http:\/\/localhost:3000<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Optional: Run Both Simultaneously<\/strong><\/h3>\n\n\n\n<p>Install the <code>concurrently<\/code> pacakge:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install concurrently --save-dev<\/code><\/pre>\n\n\n\n<p>Then update <code>package.json<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"scripts\": {\n    \"dev\": \"concurrently \\\"npm run dev:frontend\\\" \\\"npm run dev:backend\\\"\",\n    \"dev:frontend\": \"next dev\",\n    \"dev:backend\": \"node server\/index.js\"\n  }\n}<\/code><\/pre>\n\n\n\n<p>Now both can be run with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Next.js &#8211; The React Framework for the Web https:\/\/nextjs.org Prerequisites Create a new app Create Frontend Directories Test &#8211; Run the development server Install Backend Dependencies Create Backend Server Directory and Files Configure Express Backend (index.js) and Environment Variables (.env) Run Backend http:\/\/localhost:4000 Run Frontend http:\/\/localhost:3000 Optional: Run Both Simultaneously Install the concurrently pacakge: Then [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-126","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/7zeros.com\/index.php?rest_route=\/wp\/v2\/pages\/126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/7zeros.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/7zeros.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/7zeros.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/7zeros.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=126"}],"version-history":[{"count":14,"href":"https:\/\/7zeros.com\/index.php?rest_route=\/wp\/v2\/pages\/126\/revisions"}],"predecessor-version":[{"id":170,"href":"https:\/\/7zeros.com\/index.php?rest_route=\/wp\/v2\/pages\/126\/revisions\/170"}],"wp:attachment":[{"href":"https:\/\/7zeros.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}