{"id":6895,"date":"2026-07-29T23:50:13","date_gmt":"2026-07-29T14:50:13","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=6895"},"modified":"2026-07-30T08:33:45","modified_gmt":"2026-07-29T23:33:45","slug":"nextjs-project-start","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/07\/29\/nextjs-project-start\/","title":{"rendered":"[nextjs]\ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791 \/ Project Start"},"content":{"rendered":"\n<p>\ud83d\udcc1 Next.js\ub294 \ud654\uba74 \ub514\uc790\uc778\ubd80\ud130 \ubc31\uc5d4\ub4dc API \uc11c\ubc84 \uad6c\ucd95, \uac80\uc0c9\uc5d4\uc9c4 \ucd5c\uc801\ud654(SEO), \uc6f9\uc0ac\uc774\ud2b8 \uc18d\ub3c4 \ud5a5\uc0c1\uae4c\uc9c0 \ud55c \ubc88\uc5d0 \ud574\uacb0\ud560 \uc218 \uc788\uac8c \ub9cc\ub4e0 \ud504\ub808\uc784 \uc6cc\ud06c\uc785\ub2c8\ub2e4.<br>Next.js is a framework that enables you to handle everything from UI design and backend API server development to search engine optimization (SEO) and website speed improvements all in one go.<\/p>\n\n\n\n<p>\ud83d\udcc1 \ub9ac\uc561\ud2b8\ub97c \ub354 \ud3b8\ub9ac\ud558\uace0, \ub354 \ube60\ub974\uac8c \uc791\ub3d9\ud558\uac8c \ub9cc\ub4e4\uba74\uc11c \ubc31\uc5d4\ub4dc \uae30\ub2a5\uae4c\uc9c0 \ud569\uccd0\ub193\uc740 \ubaa8\ub358 \uc6f9 \uac1c\ubc1c\uc758 \ud45c\uc900 \ud504\ub808\uc784\uc6cc\ud06c \uc785\ub2c8\ub2e4.<br>It is a standard framework for modern web development that integrates backend capabilities while making Act operate more conveniently and quickly.<\/p>\n\n\n\n<p>\ud83d\udcc1 \ud504\ub85c\uc81d\ud2b8 \uc124\uce58 \/ Project Installation<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-next-app@latest<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>nextjs % <strong>npx create-next-app@latest<\/strong>\nNeed to install the following packages:\ncreate-next-app@16.2.12\nOk to proceed? (y) y\n\u2714 What is your project named? \u2026 <strong>myapp<\/strong>\n\u2714 Would you like to use the recommended Next.js defaults? \u203a <strong>Yes<\/strong>, use recommended defaults\nCreating a new Next.js app in \/Users\/... \/NextJS\/myapp.\n\nUsing npm.\n\nInitializing project with template: app-tw \n\n\nInstalling dependencies:\n- next\n- react\n- react-dom\n\nInstalling devDependencies:\n- @tailwindcss\/postcss\n- @types\/node\n- @types\/react\n- @types\/react-dom\n- eslint\n- eslint-config-next\n- tailwindcss\n- typescript<\/code><\/pre>\n\n\n\n<p>\ud83d\udcc1 \ud504\ub85c\uc81d\ud2b8 \uc2e4\ud589 \/ Project Execution<\/p>\n\n\n\n<p>\u2714\ufe0f \ud130\ubbf8\ub110\uc5d0\uc11c npm run dev\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<br>Run <code>npm run dev<\/code> in the terminal.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>myapp % <strong>npm run dev<\/strong>\n\n&gt; myapp@0.1.0 dev\n&gt; next dev\n\n\u25b2 Next.js 16.2.12 (Turbopack)\n- Local:         http:\/\/localhost:3000\n- Network:       http:\/\/192.168.0.3:3000\n\u2713 Ready in 174ms\n<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f \ube0c\ub77c\uc6b0\uc800\uc5d0 http:\/\/localhost:3000\ubc88\uc73c\ub85c \uc811\uc18d\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"711\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjsfirstpage-jpg.jpg\" alt=\"\" class=\"wp-image-6927\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjsfirstpage-jpg.jpg 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjsfirstpage-jpg-300x267.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjsfirstpage-jpg-768x683.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjsfirstpage-jpg-400x356.jpg 400w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">localhost:3000,macOS<\/figcaption><\/figure>\n\n\n\n<p>\ud83d\udcc1 \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870<br>Project Directory Structure<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>1.app\/: \n- \ud648\ud398\uc774\uc9c0 \ud30c\uc77c \/ Website files\n\n- app\/page.tsx: \ud648\ud398\uc774\uc9c0(\uba54\uc778 \ud654\uba74) \uad6c\uc131 \ud30c\uc77c\uc785\ub2c8\ub2e4. \uc774 \ud30c\uc77c\uc758 \ub0b4\uc6a9\uc744 \ubc14\uafb8\uba74 \ube0c\ub77c\uc6b0\uc800 \ud654\uba74\uc774 \ubc14\ub85c \ubc14\ub01d\ub2c8\ub2e4.\napp\/page.tsx: This is the file that defines the homepage (main screen). Changes made to this file are immediately reflected in the browser display.\n\n2.public\/: \n- \uc774\ubbf8\uc9c0, \ud3f0\ud2b8, \ud30c\ube44\ucf58 \ub4f1 \uc815\uc801 \ud30c\uc77c\uc744 \ub123\ub294 \uacf3\uc785\ub2c8\ub2e4.\nThis is where you place static files such as images, fonts, and favicons.\n\n3.next.config.ts: \n- Next.js \ud504\ub85c\uc81d\ud2b8\uc758 \ud658\uacbd \uc124\uc815 \ud30c\uc77c\uc785\ub2c8\ub2e4.\nThis is the configuration file for the Next.js project.\n\n4.package.json: \n- \ud504\ub85c\uc81d\ud2b8 \uc815\ubcf4\uc640 \uc124\uce58\ub41c \ub77c\uc774\ube0c\ub7ec\ub9ac \ubaa9\ub85d\uc774 \ub2f4\uae34 \ud30c\uc77c\uc785\ub2c8\ub2e4.\nThis file contains project information and a list of installed libraries.<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udcc1 \uba54\uc778\ud398\uc774\uc9c0 \uc218\uc815\ud574\ubcf4\uae30<br>Try editing the main page.<\/p>\n\n\n\n<p>\u2714\ufe0f app \ub514\ub809\ud1a0\ub9ac\ub0b4\uc758 page.tsx\ud30c\uc77c\uc744 \uc544\ub798\uc640\uac19\uc774 \uc218\uc815\ud569\ub2c8\ub2e4.<br>Modify the <code>page.tsx<\/code> file in the <code>app<\/code> directory as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Image from \"next\/image\";\n\nexport default function Home() {\n  return (\n    &lt;div style={{ \n      display: 'flex', \n      flexDirection: 'column',\n      justifyContent: 'center', \n      alignItems: 'center', \n      height: '100vh',\n      gap: '20px' \n    }}&gt;\n      &lt;h1 style={{ fontSize: '3rem', fontWeight: 'bold' }}&gt;\n        \ud83d\udc49\ud83c\udffb \uccab\ubc88\uc9f8 Next.js \uc571 \/ first Next.js App \ud83c\udf10\n      &lt;\/h1&gt;\n      &lt;p style={{ fontSize: '1.2rem', color: '#666' }}&gt;\n        \ud83e\udd2a \uccab \ud654\uba74 \uc218\uc815\uc5d0 \uc131\uacf5\ud588\uc2b5\ub2c8\ub2e4! \/ Successfully modified the first screen!\n      &lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"407\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjspageedit-jpg.jpg\" alt=\"\" class=\"wp-image-6929\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjspageedit-jpg.jpg 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjspageedit-jpg-300x153.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjspageedit-jpg-768x391.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/nextjspageedit-jpg-400x204.jpg 400w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">localhost:3000,macOS<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udcc1 \ubc30\ud3ec \/ Deploying<\/p>\n\n\n\n<p>\u2714\ufe0f \ub9ac\ub205\uc2a4 \uc11c\ubc84\uc5d0 \ubc30\ud3ec\ud558\uae30<br>Deploying to a Linux Server<\/p>\n\n\n\n<p>&#8212; \ube4c\ub4dc\ud558\uae30 \/ Build<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>myapp % npm run build\n\n&gt; myapp@0.1.0 build\n&gt; next build\n\n\u25b2 Next.js 16.2.12 (Turbopack)\n\n  Creating an optimized production build ...\n\u2713 Compiled successfully in 1020ms\n\u2713 Finished TypeScript in 774ms    \n\u2713 Collecting page data using 5 workers in 148ms    \n\u2713 Generating static pages using 5 workers (4\/4) in 165ms\n\u2713 Finalizing page optimization in 4ms    \n\nRoute (app)\n\u250c \u25cb \/\n\u2514 \u25cb \/_not-found\n\n\n\u25cb  (Static)  prerendered as static content\n<\/code><\/pre>\n\n\n\n<p>&#8212; \uc0dd\uc131\ub41c \ud30c\uc77c \ud655\uc778 \/ Check the generated file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>myapp % <strong>ls -a<\/strong>\n.\t\t\t.gitignore\t\tapp\t\t\tnext-env.d.ts\t\tpackage-lock.json\tpublic\n..\t\t\t<strong>.next<\/strong>\t\t\tCLAUDE.md\t\tnext.config.ts\t\tpackage.json\t\tREADME.md\n.git\t\t\tAGENTS.md\t\teslint.config.mjs\tnode_modules\t\tpostcss.config.mjs\ttsconfig.json\n\n<\/code><\/pre>\n\n\n\n<p>&#8212; \uc11c\ubc84\uc5d0 \ud544\uc218\ub85c \uc5c5\ub85c\ub4dc\ud560 \ud30c\uc77c \ubc0f \ub514\ub809\ud1a0\ub9ac<br>Files and directories that must be uploaded to the server<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.next\n- \uc228\uae40 \ud3f4\ub354(\ube4c\ub4dc \uacb0\uacfc\ubb3c)\nHidden folder (build artifacts)\n\npublic \n- \uc774\ubbf8\uc9c0 \ub4f1 \uc815\uc801 \ud30c\uc77c \ud3f4\ub354\nFolder for static files such as images\n\npackage.json \n- \uc2e4\ud589 \uc2a4\ud06c\ub9bd\ud2b8 \uc815\uc758 \ud30c\uc77c\nExecution script definition file\n\npackage-lock.json \ub610\ub294 yarn.lock \n- \ubc84\uc804 \uc7a0\uae08 \ud30c\uc77c\nVersion lock file<\/code><\/pre>\n\n\n\n<p>1)\ubc14\ub85c\uc704\uc758 \ub514\ub809\ud1a0\ub9ac\uc640 \ud30c\uc77c\ub9cc \uc5c5\ub85c\ub4dc \ud574\ub3c4 \ub429\ub2c8\ub2e4.<br>You only need to upload the directory and file immediately above.<\/p>\n\n\n\n<p>1) \ud558\uc9c0\ub9cc \ud3b8\uc758\uc0c1 node_modules \ub514\ub809\ud1a0\ub9ac \uc0ad\uc81c\ud558\uace0 \uc804\uccb4 \ud504\ub85c\uc81d\ud2b8 \uc5c5\ub85c\ub4dc\ud569\ub2c8\ub2e4.<br>However, for the sake of convenience, I will delete the <code>node_modules<\/code> directory and upload the entire project.<\/p>\n\n\n\n<p>2)\uac1c\ubc1c\uc11c\ubc84\uc640 \ubc30\ud3ec\uc11c\ubc84\uac00 \ub2e4\ub978 \uacbd\uc6b0 \uc6b4\uc601\uccb4\uc81c\uc5d0 \ub9de\ub294 \ubaa8\ub4c8\uc744 \uc124\uce58\ud574\uc57c\ud558\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<br>This is because you need to install modules compatible with the operating system when the development server and the deployment server differ.<\/p>\n\n\n\n<p>&#8212; \uc11c\ubc84\uc5d0 \uc62c\ub9b0 \ud6c4 \uc2e4\ud589\ud558\uae30<br>Running after uploading to the server<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># 1. \uc11c\ubc84\uc5d0 \ud504\ub85c\uc81d\ud2b8\ub97c \ud1b5\uc9f8\ub85c \uc5c5\ub85c\ub4dc\ud55c \ud6c4, \ud574\ub2f9 \ud3f4\ub354\ub85c \uc774\ub3d9\n# 1. Upload the entire project to the server, then navigate to that folder.\ncd myapp\n\n# 2. node_modules \ud3f4\ub354 \uc0ad\uc81c\n# 2. Delete the node_modules folder\nrm -rf node_modules\n\n# 3.\ub77c\uc774\ube0c\ub7ec\ub9ac \uc124\uce58\n# 3. Installing Libraries\nnpm install\n\n# 4. \uc11c\ubc84 \uc2e4\ud589\n# 4. Running the Server\nnpm run start\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"508\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/myapp-server-jpg.jpg\" alt=\"\" class=\"wp-image-6931\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/myapp-server-jpg.jpg 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/myapp-server-jpg-300x191.jpg 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/myapp-server-jpg-768x488.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/07\/myapp-server-jpg-400x254.jpg 400w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">192.168&#8230;.,Linux<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcc1 Next.js\ub294 \ud654\uba74 \ub514\uc790\uc778\ubd80\ud130 \ubc31\uc5d4\ub4dc API \uc11c\ubc84 \uad6c\ucd95, \uac80\uc0c9\uc5d4\uc9c4 \ucd5c\uc801\ud654(SEO), \uc6f9\uc0ac\uc774\ud2b8 \uc18d\ub3c4 \ud5a5\uc0c1\uae4c\uc9c0 \ud55c \ubc88\uc5d0 \ud574\uacb0\ud560 \uc218 \uc788\uac8c \ub9cc\ub4e0 \ud504\ub808\uc784 \uc6cc\ud06c\uc785\ub2c8\ub2e4.Next.js is a framework that enables you to handle everything from UI design and backend API server development to search engine optimization (SEO) and website speed improvements all in one go. \ud83d\udcc1 \ub9ac\uc561\ud2b8\ub97c \ub354 \ud3b8\ub9ac\ud558\uace0, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,1,7],"tags":[],"class_list":["post-6895","post","type-post","status-publish","format-standard","hentry","category-nextjs","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/6895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=6895"}],"version-history":[{"count":34,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/6895\/revisions"}],"predecessor-version":[{"id":6933,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/6895\/revisions\/6933"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=6895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=6895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=6895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}