\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e23\u0e30\u0e1a\u0e1a<\/strong><\/h4>\n\n\n\n- Node.js 10.13<\/a> \u0e2b\u0e23\u0e37\u0e2d \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19\u0e2a\u0e39\u0e07\u0e01\u0e27\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/li>
- MacOS, Windows (including WSL), \u0e41\u0e25\u0e30 Linux \u0e17\u0e35\u0e48\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19<\/li><\/ul>\n\n\n\n
\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 Next.js<\/h2>\n\n\n\n\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e1a\u0e1a\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/strong><\/h3>\n\n\n\n\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e17\u0e32\u0e07 Next.js \u0e41\u0e19\u0e30\u0e19\u0e33\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49 create-next-app \u0e0b\u0e36\u0e48\u0e07\u0e21\u0e31\u0e19\u0e08\u0e30\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e43\u0e2b\u0e49\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e42\u0e14\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n
npx create-next-app\n\/\/ \u0e2b\u0e23\u0e37\u0e2d\nyarn create next-app<\/code><\/pre>\n\n\n\n\u0e16\u0e49\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a TypeScript \u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u00a0--typescript<\/code>\u00a0flag \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\nnpx create-next-app --typescript\n\/\/ \u0e2b\u0e23\u0e37\u0e2d\nyarn create next-app --typescript<\/code><\/pre>\n\n\n\n\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e17\u0e33\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e43\u0e2b\u0e49\u0e17\u0e33\u0e15\u0e32\u0e21\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e40\u0e0a\u0e48\u0e19 \u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d App \u0e41\u0e25\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01 Template \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e2d\u0e32\u0e08\u0e08\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19 Default starter app \u0e01\u0e48\u0e2d\u0e19\u0e01\u0e47\u0e44\u0e14\u0e49\u0e04\u0e23\u0e31\u0e1a <\/p>\n\n\n\n
\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e21\u0e31\u0e19\u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e42\u0e14\u0e22\u0e2d\u0e32\u0e08\u0e08\u0e30\u0e25\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e41\u0e01\u0e49\u0e44\u0e02\u0e17\u0e35\u0e48 pages\/index.js<\/code> \u0e41\u0e25\u0e30\u0e14\u0e39\u0e1c\u0e25\u0e17\u0e35\u0e48 browser \u0e2d\u0e35\u0e01\u0e17\u0e35 \u0e2b\u0e23\u0e37\u0e2d\u0e08\u0e30\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e1a\u0e1a Manual \u0e17\u0e33\u0e40\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e17\u0e33\u0e15\u0e32\u0e21\u0e43\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22\u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e1a\u0e1a Manual<\/strong><\/h3>\n\n\n\n\u0e01\u0e48\u0e2d\u0e19\u0e2d\u0e37\u0e48\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e01\u0e47\u0e1a\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04 \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e40\u0e1b\u0e34\u0e14 Terminal \u0e41\u0e25\u0e49\u0e27\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c \u0e17\u0e35\u0e48\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e36\u0e49\u0e19\u0e21\u0e32 \u0e42\u0e14\u0e22\u0e08\u0e30\u0e43\u0e0a\u0e49 npm init \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e0b\u0e36\u0e48\u0e07\u0e21\u0e31\u0e19\u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c package.json \u0e43\u0e2b\u0e49\u0e40\u0e2d\u0e07\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/p>\n\n\n\n
npm init -y<\/code><\/pre>\n\n\n\n\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 Next.js \u0e0b\u0e36\u0e48\u0e07\u0e16\u0e49\u0e32\u0e43\u0e04\u0e23\u0e40\u0e04\u0e22\u0e43\u0e0a\u0e49 create-react-app \u0e21\u0e32 \u0e08\u0e30\u0e25\u0e31\u0e01\u0e29\u0e13\u0e30\u0e04\u0e25\u0e49\u0e32\u0e22\u0e01\u0e31\u0e19 \u0e41\u0e15\u0e48 Next.js \u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19 create-next-app \u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n
npm install react react-dom next \/\/ \u0e16\u0e49\u0e32\u0e15\u0e34\u0e14 permission \u0e43\u0e2b\u0e49 sudo \u0e19\u0e33\u0e2b\u0e19\u0e49\u0e32<\/code><\/pre>\n\n\n\n\u0e40\u0e1e\u0e34\u0e48\u0e21 script \u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49\u0e25\u0e07\u0e44\u0e1b\u0e43\u0e19 package.json<\/p>\n\n\n\n
\"scripts\": {\n \"dev\": \"next\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n}<\/code><\/pre>\n\n\n\n\u0e25\u0e2d\u0e07\u0e2a\u0e31\u0e48\u0e07 run \u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04 \u0e14\u0e49\u0e27\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n
npm run dev<\/code><\/pre>\n\n\n\n\u0e41\u0e19\u0e48\u0e19\u0e2d\u0e19! \u0e21\u0e31\u0e19\u0e08\u0e30 Error: > Couldn’t find a pages<\/code> directory. Please create one under the project root<\/p><\/blockquote>\n\n\n\nError \u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e27\u0e48\u0e32\u0e40\u0e23\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e2b\u0e19\u0e49\u0e32 page \u0e43\u0e14\u0e46\u0e40\u0e25\u0e22 \u0e14\u0e31\u0e07\u0e19\u0e31\u0e49\u0e19\u0e40\u0e23\u0e32\u0e21\u0e32\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e01\u0e31\u0e19\u0e14\u0e39\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e16\u0e31\u0e14\u0e44\u0e1b<\/p>\n\n\n\n
\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c<\/h2>\n\n\n\n
Next.js \u0e19\u0e31\u0e49\u0e19\u0e08\u0e30\u0e17\u0e33 Rouing \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e42\u0e14\u0e22\u0e40\u0e23\u0e32\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07 React Component \u0e44\u0e27\u0e49\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c pages \u0e40\u0e23\u0e34\u0e48\u0e21\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 (Index)<\/p>\n\n\n\n
\/\/ pages\/index.js\nexport default () => {\n return (\n <div>\n <h1>Hello! Next.js<\/h1>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e25\u0e2d\u0e07\u0e2a\u0e31\u0e48\u0e07\u0e23\u0e31\u0e19\u0e14\u0e49\u0e27\u0e22 npm run dev \u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07 \u0e0b\u0e36\u0e48\u0e07\u0e08\u0e30\u0e23\u0e31\u0e19\u0e44\u0e14\u0e49\u0e1b\u0e01\u0e15\u0e34<\/p>\n\n\n\n
\u0e43\u0e2b\u0e49\u0e25\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32 URL http:\/\/localhost:3000\/<\/a> \u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 Hello! Next.js \u0e41\u0e2a\u0e14\u0e07 \u0e0b\u0e36\u0e48\u0e07\u0e16\u0e49\u0e32\u0e25\u0e2d\u0e07 View page source \u0e14\u0e39 \u0e01\u0e47\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07 “Hello! Next.js” \u0e43\u0e2b\u0e49 Bot \u0e21\u0e32\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19 SEO \u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e14\u0e35\u0e02\u0e2d\u0e07 Server-side rendering (SSR) <\/p>\n\n\n\n\u0e01\u0e23\u0e13\u0e35\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 port \u0e40\u0e0a\u0e48\u0e19 \u0e08\u0e32\u0e01 3000 \u0e44\u0e1b\u0e40\u0e1b\u0e47\u0e19 8080 \u0e43\u0e2b\u0e49\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e44\u0e1f\u0e25\u0e4c package.json \u0e44\u0e1b\u0e40\u0e1e\u0e34\u0e48\u0e21 -p \u0e15\u0e32\u0e21\u0e14\u0e49\u0e27\u0e22\u0e40\u0e25\u0e02 port \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 \u0e14\u0e31\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n
\"scripts\": { \n \"dev\": \"next -p 8080\" \n},<\/code><\/pre>\n\n\n\n\u0e17\u0e33 Routing<\/h2>\n\n\n\n
\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e17\u0e35\u0e48\u0e40\u0e01\u0e23\u0e34\u0e48\u0e19\u0e44\u0e1b\u0e41\u0e25\u0e49\u0e27\u0e27\u0e48\u0e32 Next.js \u0e19\u0e31\u0e49\u0e19\u0e08\u0e30\u0e17\u0e33 Rouing \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e40\u0e23\u0e32\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e01\u0e31\u0e19 \u0e42\u0e14\u0e22\u0e43\u0e2b\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e44\u0e1f\u0e25\u0e4c About \u0e41\u0e25\u0e30 Contact \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n
\/\/ pages\/about.js\nexport default () => {\n return (\n <div>\n <h1>About page<\/h1>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\/\/ pages\/contact.js\nexport default () => {\n return (\n <div>\n <h1>Contact page<\/h1>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e41\u0e25\u0e49\u0e27\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32 URL http:\/\/localhost:3000\/about<\/a> \u0e2b\u0e23\u0e37\u0e2d http:\/\/localhost:3000\/contact<\/a> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e17\u0e35\u0e48 Next.js \u0e17\u0e33 Rouing \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e44\u0e14\u0e49<\/p>\n\n\n\n\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e25\u0e34\u0e07\u0e04\u0e4c<\/h2>\n\n\n\n
\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e17\u0e33\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e42\u0e22\u0e07\u0e2b\u0e19\u0e49\u0e32 page \u0e01\u0e31\u0e19 \u0e0b\u0e36\u0e48\u0e07\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e30\u0e21\u0e35\u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e0a\u0e38\u0e14\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19 \u0e14\u0e31\u0e07\u0e19\u0e31\u0e49\u0e19\u0e40\u0e23\u0e32\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e27\u0e34\u0e18\u0e35\u0e41\u0e0a\u0e23\u0e4c Component \u0e41\u0e25\u0e49\u0e27\u0e43\u0e2b\u0e49\u0e41\u0e15\u0e48\u0e25\u0e30 page \u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49 \u0e40\u0e27\u0e25\u0e32\u0e41\u0e01\u0e49\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e08\u0e30\u0e44\u0e14\u0e49\u0e41\u0e01\u0e49\u0e17\u0e35\u0e48\u0e40\u0e14\u0e35\u0e22\u0e27 \u0e43\u0e2b\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c components \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e19\u0e35\u0e49<\/p>\n\n\n\n
\u251c\u2500\u2500 components\n\u2502 \u2514\u2500\u2500 Menu.js\n\u2514\u2500\u2500 pages\n \u251c\u2500\u2500 about.js\n \u251c\u2500\u2500 contact.js\n \u2514\u2500\u2500 index.js<\/code><\/pre>\n\n\n\n\u0e2a\u0e23\u0e49\u0e32\u0e07 Component \u0e44\u0e1f\u0e25\u0e4c\u0e0a\u0e37\u0e48\u0e2d Menu.js \u0e20\u0e32\u0e22\u0e43\u0e15\u0e49\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c components<\/p>\n\n\n\n
import Link from 'next\/link'\n\nexport default () => {\n return (\n <div>\n <ul>\n <li><Link href=\"\/\"><a>Home<\/a><\/Link><\/li>\n <li><Link href=\"\/about\"><a>About<\/a><\/Link><\/li>\n <li><Link href=\"\/contact\"><a>Contact<\/a><\/Link><\/li>\n <\/ul>\n <\/div>\n )\n }<\/code><\/pre>\n\n\n\n\u0e2a\u0e31\u0e07\u0e40\u0e01\u0e15\u0e40\u0e23\u0e32\u0e08\u0e30\u0e43\u0e0a\u0e49 Link \u0e04\u0e23\u0e2d\u0e1a\u0e41\u0e17\u0e47\u0e01 a \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e41\u0e25\u0e49\u0e27\u0e08\u0e30\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23 refresh \u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32 <\/p>\n\n\n\n
\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e19\u0e31\u0e49\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21 Component Menu \u0e43\u0e19\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32<\/p>\n\n\n\n
\/\/ pages\/index.js\nimport Menu from '..\/components\/Menu'\n\nexport default () => {\n return (\n <div>\n <h1>Hello! Next.js<\/h1>\n <Menu \/>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\/\/ pages\/about.js\nimport Menu from '..\/components\/Menu'\n\nexport default () => {\n return (\n <div>\n <h1>About page<\/h1>\n <Menu \/>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\/\/ pages\/contact.js\nimport Menu from '..\/components\/Menu'\n\nexport default () => {\n return (\n <div>\n <h1>Contact page<\/h1>\n <Menu \/>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/memo8.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2563-04-18-at-19.47.38.png\")
<\/figure>\n\n\n\n\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e41\u0e1a\u0e1a\u0e23\u0e39\u0e1b\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32 \u0e0b\u0e36\u0e48\u0e07\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e2d\u0e07\u0e04\u0e25\u0e34\u0e01\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e44\u0e1b\u0e21\u0e32\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e44\u0e14\u0e49<\/p>\n\n\n\n
Deploy Production<\/h2>\n\n\n\n
\u0e42\u0e14\u0e22\u0e40\u0e23\u0e32\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07 Build \u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e01\u0e48\u0e2d\u0e19 \u0e0b\u0e36\u0e48\u0e07 Next.js \u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07 production \u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c .next <\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n\u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e2a\u0e31\u0e48\u0e07 start \u0e40\u0e1e\u0e37\u0e48\u0e2d Node.js server \u0e02\u0e2d\u0e07\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e02\u0e36\u0e49\u0e19\u0e21\u0e32 \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e39\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48 URL : http:\/\/localhost:3000\/<\/a><\/p>\n\n\n\nnpm start<\/code><\/pre>\n\n\n\n\u0e01\u0e47\u0e02\u0e2d\u0e08\u0e1a\u0e1a\u0e25\u0e47\u0e2d\u0e01\u0e19\u0e35\u0e49\u0e44\u0e27\u0e49\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e40\u0e17\u0e48\u0e32\u0e19\u0e35\u0e49\u0e04\u0e23\u0e31\u0e1a<\/p>\n","protected":false},"excerpt":{"rendered":"
\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e1c\u0e21\u0e40\u0e02\u0e35\u0e22\u0e19 React \u0e2d\u0e22\u0e39\u0e48\u0e41\u0e15\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e35\u0e22\u0e2d\u0e22\u0e39\u0e48\u0e08\u0e38\u0e14\u0e19\u0e36\u0e07 \u0e04\u0e37\u0e2d\u0e21\u0e31\u0e19 […]<\/p>\n","protected":false},"author":1,"featured_media":6088,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[74],"tags":[175],"gutentor_comment":0,"_links":{"self":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/posts\/5513"}],"collection":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/comments?post=5513"}],"version-history":[{"count":0,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/posts\/5513\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/media\/6088"}],"wp:attachment":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/media?parent=5513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/categories?post=5513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/tags?post=5513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 Next.js<\/h2>\n\n\n\n\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e1a\u0e1a\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/strong><\/h3>\n\n\n\n\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e17\u0e32\u0e07 Next.js \u0e41\u0e19\u0e30\u0e19\u0e33\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49 create-next-app \u0e0b\u0e36\u0e48\u0e07\u0e21\u0e31\u0e19\u0e08\u0e30\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e43\u0e2b\u0e49\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e42\u0e14\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n
npx create-next-app\n\/\/ \u0e2b\u0e23\u0e37\u0e2d\nyarn create next-app<\/code><\/pre>\n\n\n\n\u0e16\u0e49\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a TypeScript \u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u00a0--typescript<\/code>\u00a0flag \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\nnpx create-next-app --typescript\n\/\/ \u0e2b\u0e23\u0e37\u0e2d\nyarn create next-app --typescript<\/code><\/pre>\n\n\n\n\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e17\u0e33\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e43\u0e2b\u0e49\u0e17\u0e33\u0e15\u0e32\u0e21\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e40\u0e0a\u0e48\u0e19 \u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d App \u0e41\u0e25\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01 Template \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e2d\u0e32\u0e08\u0e08\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19 Default starter app \u0e01\u0e48\u0e2d\u0e19\u0e01\u0e47\u0e44\u0e14\u0e49\u0e04\u0e23\u0e31\u0e1a <\/p>\n\n\n\n
\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e21\u0e31\u0e19\u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e42\u0e14\u0e22\u0e2d\u0e32\u0e08\u0e08\u0e30\u0e25\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e41\u0e01\u0e49\u0e44\u0e02\u0e17\u0e35\u0e48 pages\/index.js<\/code> \u0e41\u0e25\u0e30\u0e14\u0e39\u0e1c\u0e25\u0e17\u0e35\u0e48 browser \u0e2d\u0e35\u0e01\u0e17\u0e35 \u0e2b\u0e23\u0e37\u0e2d\u0e08\u0e30\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e1a\u0e1a Manual \u0e17\u0e33\u0e40\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e17\u0e33\u0e15\u0e32\u0e21\u0e43\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22\u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e1a\u0e1a Manual<\/strong><\/h3>\n\n\n\n\u0e01\u0e48\u0e2d\u0e19\u0e2d\u0e37\u0e48\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e01\u0e47\u0e1a\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04 \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e40\u0e1b\u0e34\u0e14 Terminal \u0e41\u0e25\u0e49\u0e27\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c \u0e17\u0e35\u0e48\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e36\u0e49\u0e19\u0e21\u0e32 \u0e42\u0e14\u0e22\u0e08\u0e30\u0e43\u0e0a\u0e49 npm init \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e0b\u0e36\u0e48\u0e07\u0e21\u0e31\u0e19\u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c package.json \u0e43\u0e2b\u0e49\u0e40\u0e2d\u0e07\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/p>\n\n\n\n
npm init -y<\/code><\/pre>\n\n\n\n\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 Next.js \u0e0b\u0e36\u0e48\u0e07\u0e16\u0e49\u0e32\u0e43\u0e04\u0e23\u0e40\u0e04\u0e22\u0e43\u0e0a\u0e49 create-react-app \u0e21\u0e32 \u0e08\u0e30\u0e25\u0e31\u0e01\u0e29\u0e13\u0e30\u0e04\u0e25\u0e49\u0e32\u0e22\u0e01\u0e31\u0e19 \u0e41\u0e15\u0e48 Next.js \u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19 create-next-app \u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n
npm install react react-dom next \/\/ \u0e16\u0e49\u0e32\u0e15\u0e34\u0e14 permission \u0e43\u0e2b\u0e49 sudo \u0e19\u0e33\u0e2b\u0e19\u0e49\u0e32<\/code><\/pre>\n\n\n\n\u0e40\u0e1e\u0e34\u0e48\u0e21 script \u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49\u0e25\u0e07\u0e44\u0e1b\u0e43\u0e19 package.json<\/p>\n\n\n\n
\"scripts\": {\n \"dev\": \"next\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n}<\/code><\/pre>\n\n\n\n\u0e25\u0e2d\u0e07\u0e2a\u0e31\u0e48\u0e07 run \u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04 \u0e14\u0e49\u0e27\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n
npm run dev<\/code><\/pre>\n\n\n\n\u0e41\u0e19\u0e48\u0e19\u0e2d\u0e19! \u0e21\u0e31\u0e19\u0e08\u0e30 Error: > Couldn’t find a pages<\/code> directory. Please create one under the project root<\/p><\/blockquote>\n\n\n\nError \u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e27\u0e48\u0e32\u0e40\u0e23\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e2b\u0e19\u0e49\u0e32 page \u0e43\u0e14\u0e46\u0e40\u0e25\u0e22 \u0e14\u0e31\u0e07\u0e19\u0e31\u0e49\u0e19\u0e40\u0e23\u0e32\u0e21\u0e32\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e01\u0e31\u0e19\u0e14\u0e39\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e16\u0e31\u0e14\u0e44\u0e1b<\/p>\n\n\n\n
\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c<\/h2>\n\n\n\n
Next.js \u0e19\u0e31\u0e49\u0e19\u0e08\u0e30\u0e17\u0e33 Rouing \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e42\u0e14\u0e22\u0e40\u0e23\u0e32\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07 React Component \u0e44\u0e27\u0e49\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c pages \u0e40\u0e23\u0e34\u0e48\u0e21\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 (Index)<\/p>\n\n\n\n
\/\/ pages\/index.js\nexport default () => {\n return (\n <div>\n <h1>Hello! Next.js<\/h1>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e25\u0e2d\u0e07\u0e2a\u0e31\u0e48\u0e07\u0e23\u0e31\u0e19\u0e14\u0e49\u0e27\u0e22 npm run dev \u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07 \u0e0b\u0e36\u0e48\u0e07\u0e08\u0e30\u0e23\u0e31\u0e19\u0e44\u0e14\u0e49\u0e1b\u0e01\u0e15\u0e34<\/p>\n\n\n\n
\u0e43\u0e2b\u0e49\u0e25\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32 URL http:\/\/localhost:3000\/<\/a> \u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 Hello! Next.js \u0e41\u0e2a\u0e14\u0e07 \u0e0b\u0e36\u0e48\u0e07\u0e16\u0e49\u0e32\u0e25\u0e2d\u0e07 View page source \u0e14\u0e39 \u0e01\u0e47\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07 “Hello! Next.js” \u0e43\u0e2b\u0e49 Bot \u0e21\u0e32\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19 SEO \u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e14\u0e35\u0e02\u0e2d\u0e07 Server-side rendering (SSR) <\/p>\n\n\n\n\u0e01\u0e23\u0e13\u0e35\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 port \u0e40\u0e0a\u0e48\u0e19 \u0e08\u0e32\u0e01 3000 \u0e44\u0e1b\u0e40\u0e1b\u0e47\u0e19 8080 \u0e43\u0e2b\u0e49\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e44\u0e1f\u0e25\u0e4c package.json \u0e44\u0e1b\u0e40\u0e1e\u0e34\u0e48\u0e21 -p \u0e15\u0e32\u0e21\u0e14\u0e49\u0e27\u0e22\u0e40\u0e25\u0e02 port \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 \u0e14\u0e31\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n
\"scripts\": { \n \"dev\": \"next -p 8080\" \n},<\/code><\/pre>\n\n\n\n\u0e17\u0e33 Routing<\/h2>\n\n\n\n
\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e17\u0e35\u0e48\u0e40\u0e01\u0e23\u0e34\u0e48\u0e19\u0e44\u0e1b\u0e41\u0e25\u0e49\u0e27\u0e27\u0e48\u0e32 Next.js \u0e19\u0e31\u0e49\u0e19\u0e08\u0e30\u0e17\u0e33 Rouing \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e40\u0e23\u0e32\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e01\u0e31\u0e19 \u0e42\u0e14\u0e22\u0e43\u0e2b\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e44\u0e1f\u0e25\u0e4c About \u0e41\u0e25\u0e30 Contact \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n
\/\/ pages\/about.js\nexport default () => {\n return (\n <div>\n <h1>About page<\/h1>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\/\/ pages\/contact.js\nexport default () => {\n return (\n <div>\n <h1>Contact page<\/h1>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e41\u0e25\u0e49\u0e27\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32 URL http:\/\/localhost:3000\/about<\/a> \u0e2b\u0e23\u0e37\u0e2d http:\/\/localhost:3000\/contact<\/a> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e17\u0e35\u0e48 Next.js \u0e17\u0e33 Rouing \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e44\u0e14\u0e49<\/p>\n\n\n\n\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e25\u0e34\u0e07\u0e04\u0e4c<\/h2>\n\n\n\n
\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e17\u0e33\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e42\u0e22\u0e07\u0e2b\u0e19\u0e49\u0e32 page \u0e01\u0e31\u0e19 \u0e0b\u0e36\u0e48\u0e07\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e30\u0e21\u0e35\u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e0a\u0e38\u0e14\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19 \u0e14\u0e31\u0e07\u0e19\u0e31\u0e49\u0e19\u0e40\u0e23\u0e32\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e27\u0e34\u0e18\u0e35\u0e41\u0e0a\u0e23\u0e4c Component \u0e41\u0e25\u0e49\u0e27\u0e43\u0e2b\u0e49\u0e41\u0e15\u0e48\u0e25\u0e30 page \u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49 \u0e40\u0e27\u0e25\u0e32\u0e41\u0e01\u0e49\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e08\u0e30\u0e44\u0e14\u0e49\u0e41\u0e01\u0e49\u0e17\u0e35\u0e48\u0e40\u0e14\u0e35\u0e22\u0e27 \u0e43\u0e2b\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c components \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e19\u0e35\u0e49<\/p>\n\n\n\n
\u251c\u2500\u2500 components\n\u2502 \u2514\u2500\u2500 Menu.js\n\u2514\u2500\u2500 pages\n \u251c\u2500\u2500 about.js\n \u251c\u2500\u2500 contact.js\n \u2514\u2500\u2500 index.js<\/code><\/pre>\n\n\n\n\u0e2a\u0e23\u0e49\u0e32\u0e07 Component \u0e44\u0e1f\u0e25\u0e4c\u0e0a\u0e37\u0e48\u0e2d Menu.js \u0e20\u0e32\u0e22\u0e43\u0e15\u0e49\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c components<\/p>\n\n\n\n
import Link from 'next\/link'\n\nexport default () => {\n return (\n <div>\n <ul>\n <li><Link href=\"\/\"><a>Home<\/a><\/Link><\/li>\n <li><Link href=\"\/about\"><a>About<\/a><\/Link><\/li>\n <li><Link href=\"\/contact\"><a>Contact<\/a><\/Link><\/li>\n <\/ul>\n <\/div>\n )\n }<\/code><\/pre>\n\n\n\n\u0e2a\u0e31\u0e07\u0e40\u0e01\u0e15\u0e40\u0e23\u0e32\u0e08\u0e30\u0e43\u0e0a\u0e49 Link \u0e04\u0e23\u0e2d\u0e1a\u0e41\u0e17\u0e47\u0e01 a \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e41\u0e25\u0e49\u0e27\u0e08\u0e30\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23 refresh \u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32 <\/p>\n\n\n\n
\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e19\u0e31\u0e49\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21 Component Menu \u0e43\u0e19\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32<\/p>\n\n\n\n
\/\/ pages\/index.js\nimport Menu from '..\/components\/Menu'\n\nexport default () => {\n return (\n <div>\n <h1>Hello! Next.js<\/h1>\n <Menu \/>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\/\/ pages\/about.js\nimport Menu from '..\/components\/Menu'\n\nexport default () => {\n return (\n <div>\n <h1>About page<\/h1>\n <Menu \/>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\/\/ pages\/contact.js\nimport Menu from '..\/components\/Menu'\n\nexport default () => {\n return (\n <div>\n <h1>Contact page<\/h1>\n <Menu \/>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\n\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e41\u0e1a\u0e1a\u0e23\u0e39\u0e1b\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32 \u0e0b\u0e36\u0e48\u0e07\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e2d\u0e07\u0e04\u0e25\u0e34\u0e01\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e44\u0e1b\u0e21\u0e32\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e44\u0e14\u0e49<\/p>\n\n\n\n
Deploy Production<\/h2>\n\n\n\n
\u0e42\u0e14\u0e22\u0e40\u0e23\u0e32\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07 Build \u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e01\u0e48\u0e2d\u0e19 \u0e0b\u0e36\u0e48\u0e07 Next.js \u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07 production \u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c .next <\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n\u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e2a\u0e31\u0e48\u0e07 start \u0e40\u0e1e\u0e37\u0e48\u0e2d Node.js server \u0e02\u0e2d\u0e07\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e02\u0e36\u0e49\u0e19\u0e21\u0e32 \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e39\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48 URL : http:\/\/localhost:3000\/<\/a><\/p>\n\n\n\nnpm start<\/code><\/pre>\n\n\n\n\u0e01\u0e47\u0e02\u0e2d\u0e08\u0e1a\u0e1a\u0e25\u0e47\u0e2d\u0e01\u0e19\u0e35\u0e49\u0e44\u0e27\u0e49\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e40\u0e17\u0e48\u0e32\u0e19\u0e35\u0e49\u0e04\u0e23\u0e31\u0e1a<\/p>\n","protected":false},"excerpt":{"rendered":"
\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e1c\u0e21\u0e40\u0e02\u0e35\u0e22\u0e19 React \u0e2d\u0e22\u0e39\u0e48\u0e41\u0e15\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e35\u0e22\u0e2d\u0e22\u0e39\u0e48\u0e08\u0e38\u0e14\u0e19\u0e36\u0e07 \u0e04\u0e37\u0e2d\u0e21\u0e31\u0e19 […]<\/p>\n","protected":false},"author":1,"featured_media":6088,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[74],"tags":[175],"gutentor_comment":0,"_links":{"self":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/posts\/5513"}],"collection":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/comments?post=5513"}],"version-history":[{"count":0,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/posts\/5513\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/media\/6088"}],"wp:attachment":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/media?parent=5513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/categories?post=5513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/tags?post=5513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e17\u0e32\u0e07 Next.js \u0e41\u0e19\u0e30\u0e19\u0e33\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49 create-next-app \u0e0b\u0e36\u0e48\u0e07\u0e21\u0e31\u0e19\u0e08\u0e30\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e43\u0e2b\u0e49\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e42\u0e14\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n
npx create-next-app\n\/\/ \u0e2b\u0e23\u0e37\u0e2d\nyarn create next-app<\/code><\/pre>\n\n\n\n\u0e16\u0e49\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a TypeScript \u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u00a0--typescript<\/code>\u00a0flag \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\nnpx create-next-app --typescript\n\/\/ \u0e2b\u0e23\u0e37\u0e2d\nyarn create next-app --typescript<\/code><\/pre>\n\n\n\n\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e17\u0e33\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e43\u0e2b\u0e49\u0e17\u0e33\u0e15\u0e32\u0e21\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e40\u0e0a\u0e48\u0e19 \u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d App \u0e41\u0e25\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01 Template \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e2d\u0e32\u0e08\u0e08\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19 Default starter app \u0e01\u0e48\u0e2d\u0e19\u0e01\u0e47\u0e44\u0e14\u0e49\u0e04\u0e23\u0e31\u0e1a <\/p>\n\n\n\n
\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e21\u0e31\u0e19\u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e42\u0e14\u0e22\u0e2d\u0e32\u0e08\u0e08\u0e30\u0e25\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e41\u0e01\u0e49\u0e44\u0e02\u0e17\u0e35\u0e48 pages\/index.js<\/code> \u0e41\u0e25\u0e30\u0e14\u0e39\u0e1c\u0e25\u0e17\u0e35\u0e48 browser \u0e2d\u0e35\u0e01\u0e17\u0e35 \u0e2b\u0e23\u0e37\u0e2d\u0e08\u0e30\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e1a\u0e1a Manual \u0e17\u0e33\u0e40\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e17\u0e33\u0e15\u0e32\u0e21\u0e43\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22\u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e1a\u0e1a Manual<\/strong><\/h3>\n\n\n\n\u0e01\u0e48\u0e2d\u0e19\u0e2d\u0e37\u0e48\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e01\u0e47\u0e1a\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04 \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e40\u0e1b\u0e34\u0e14 Terminal \u0e41\u0e25\u0e49\u0e27\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c \u0e17\u0e35\u0e48\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e36\u0e49\u0e19\u0e21\u0e32 \u0e42\u0e14\u0e22\u0e08\u0e30\u0e43\u0e0a\u0e49 npm init \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e0b\u0e36\u0e48\u0e07\u0e21\u0e31\u0e19\u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c package.json \u0e43\u0e2b\u0e49\u0e40\u0e2d\u0e07\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/p>\n\n\n\n
npm init -y<\/code><\/pre>\n\n\n\n\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 Next.js \u0e0b\u0e36\u0e48\u0e07\u0e16\u0e49\u0e32\u0e43\u0e04\u0e23\u0e40\u0e04\u0e22\u0e43\u0e0a\u0e49 create-react-app \u0e21\u0e32 \u0e08\u0e30\u0e25\u0e31\u0e01\u0e29\u0e13\u0e30\u0e04\u0e25\u0e49\u0e32\u0e22\u0e01\u0e31\u0e19 \u0e41\u0e15\u0e48 Next.js \u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19 create-next-app \u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n
npm install react react-dom next \/\/ \u0e16\u0e49\u0e32\u0e15\u0e34\u0e14 permission \u0e43\u0e2b\u0e49 sudo \u0e19\u0e33\u0e2b\u0e19\u0e49\u0e32<\/code><\/pre>\n\n\n\n\u0e40\u0e1e\u0e34\u0e48\u0e21 script \u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49\u0e25\u0e07\u0e44\u0e1b\u0e43\u0e19 package.json<\/p>\n\n\n\n
\"scripts\": {\n \"dev\": \"next\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n}<\/code><\/pre>\n\n\n\n\u0e25\u0e2d\u0e07\u0e2a\u0e31\u0e48\u0e07 run \u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04 \u0e14\u0e49\u0e27\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n
npm run dev<\/code><\/pre>\n\n\n\n\u0e41\u0e19\u0e48\u0e19\u0e2d\u0e19! \u0e21\u0e31\u0e19\u0e08\u0e30 Error: > Couldn’t find a pages<\/code> directory. Please create one under the project root<\/p><\/blockquote>\n\n\n\nError \u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e27\u0e48\u0e32\u0e40\u0e23\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e2b\u0e19\u0e49\u0e32 page \u0e43\u0e14\u0e46\u0e40\u0e25\u0e22 \u0e14\u0e31\u0e07\u0e19\u0e31\u0e49\u0e19\u0e40\u0e23\u0e32\u0e21\u0e32\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e01\u0e31\u0e19\u0e14\u0e39\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e16\u0e31\u0e14\u0e44\u0e1b<\/p>\n\n\n\n
\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c<\/h2>\n\n\n\n
Next.js \u0e19\u0e31\u0e49\u0e19\u0e08\u0e30\u0e17\u0e33 Rouing \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e42\u0e14\u0e22\u0e40\u0e23\u0e32\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07 React Component \u0e44\u0e27\u0e49\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c pages \u0e40\u0e23\u0e34\u0e48\u0e21\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 (Index)<\/p>\n\n\n\n
\/\/ pages\/index.js\nexport default () => {\n return (\n <div>\n <h1>Hello! Next.js<\/h1>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e25\u0e2d\u0e07\u0e2a\u0e31\u0e48\u0e07\u0e23\u0e31\u0e19\u0e14\u0e49\u0e27\u0e22 npm run dev \u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07 \u0e0b\u0e36\u0e48\u0e07\u0e08\u0e30\u0e23\u0e31\u0e19\u0e44\u0e14\u0e49\u0e1b\u0e01\u0e15\u0e34<\/p>\n\n\n\n
\u0e43\u0e2b\u0e49\u0e25\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32 URL http:\/\/localhost:3000\/<\/a> \u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 Hello! Next.js \u0e41\u0e2a\u0e14\u0e07 \u0e0b\u0e36\u0e48\u0e07\u0e16\u0e49\u0e32\u0e25\u0e2d\u0e07 View page source \u0e14\u0e39 \u0e01\u0e47\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07 “Hello! Next.js” \u0e43\u0e2b\u0e49 Bot \u0e21\u0e32\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19 SEO \u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e14\u0e35\u0e02\u0e2d\u0e07 Server-side rendering (SSR) <\/p>\n\n\n\n\u0e01\u0e23\u0e13\u0e35\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 port \u0e40\u0e0a\u0e48\u0e19 \u0e08\u0e32\u0e01 3000 \u0e44\u0e1b\u0e40\u0e1b\u0e47\u0e19 8080 \u0e43\u0e2b\u0e49\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e44\u0e1f\u0e25\u0e4c package.json \u0e44\u0e1b\u0e40\u0e1e\u0e34\u0e48\u0e21 -p \u0e15\u0e32\u0e21\u0e14\u0e49\u0e27\u0e22\u0e40\u0e25\u0e02 port \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 \u0e14\u0e31\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n
\"scripts\": { \n \"dev\": \"next -p 8080\" \n},<\/code><\/pre>\n\n\n\n\u0e17\u0e33 Routing<\/h2>\n\n\n\n
\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e17\u0e35\u0e48\u0e40\u0e01\u0e23\u0e34\u0e48\u0e19\u0e44\u0e1b\u0e41\u0e25\u0e49\u0e27\u0e27\u0e48\u0e32 Next.js \u0e19\u0e31\u0e49\u0e19\u0e08\u0e30\u0e17\u0e33 Rouing \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \u0e40\u0e23\u0e32\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e01\u0e31\u0e19 \u0e42\u0e14\u0e22\u0e43\u0e2b\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e44\u0e1f\u0e25\u0e4c About \u0e41\u0e25\u0e30 Contact \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n
\/\/ pages\/about.js\nexport default () => {\n return (\n <div>\n <h1>About page<\/h1>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\/\/ pages\/contact.js\nexport default () => {\n return (\n <div>\n <h1>Contact page<\/h1>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e41\u0e25\u0e49\u0e27\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32 URL http:\/\/localhost:3000\/about<\/a> \u0e2b\u0e23\u0e37\u0e2d http:\/\/localhost:3000\/contact<\/a> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e17\u0e35\u0e48 Next.js \u0e17\u0e33 Rouing \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e44\u0e14\u0e49<\/p>\n\n\n\n\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e25\u0e34\u0e07\u0e04\u0e4c<\/h2>\n\n\n\n
\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e17\u0e33\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e42\u0e22\u0e07\u0e2b\u0e19\u0e49\u0e32 page \u0e01\u0e31\u0e19 \u0e0b\u0e36\u0e48\u0e07\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e30\u0e21\u0e35\u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e0a\u0e38\u0e14\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19 \u0e14\u0e31\u0e07\u0e19\u0e31\u0e49\u0e19\u0e40\u0e23\u0e32\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e27\u0e34\u0e18\u0e35\u0e41\u0e0a\u0e23\u0e4c Component \u0e41\u0e25\u0e49\u0e27\u0e43\u0e2b\u0e49\u0e41\u0e15\u0e48\u0e25\u0e30 page \u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49 \u0e40\u0e27\u0e25\u0e32\u0e41\u0e01\u0e49\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e08\u0e30\u0e44\u0e14\u0e49\u0e41\u0e01\u0e49\u0e17\u0e35\u0e48\u0e40\u0e14\u0e35\u0e22\u0e27 \u0e43\u0e2b\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c components \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e19\u0e35\u0e49<\/p>\n\n\n\n
\u251c\u2500\u2500 components\n\u2502 \u2514\u2500\u2500 Menu.js\n\u2514\u2500\u2500 pages\n \u251c\u2500\u2500 about.js\n \u251c\u2500\u2500 contact.js\n \u2514\u2500\u2500 index.js<\/code><\/pre>\n\n\n\n\u0e2a\u0e23\u0e49\u0e32\u0e07 Component \u0e44\u0e1f\u0e25\u0e4c\u0e0a\u0e37\u0e48\u0e2d Menu.js \u0e20\u0e32\u0e22\u0e43\u0e15\u0e49\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c components<\/p>\n\n\n\n
import Link from 'next\/link'\n\nexport default () => {\n return (\n <div>\n <ul>\n <li><Link href=\"\/\"><a>Home<\/a><\/Link><\/li>\n <li><Link href=\"\/about\"><a>About<\/a><\/Link><\/li>\n <li><Link href=\"\/contact\"><a>Contact<\/a><\/Link><\/li>\n <\/ul>\n <\/div>\n )\n }<\/code><\/pre>\n\n\n\n\u0e2a\u0e31\u0e07\u0e40\u0e01\u0e15\u0e40\u0e23\u0e32\u0e08\u0e30\u0e43\u0e0a\u0e49 Link \u0e04\u0e23\u0e2d\u0e1a\u0e41\u0e17\u0e47\u0e01 a \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e41\u0e25\u0e49\u0e27\u0e08\u0e30\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23 refresh \u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32 <\/p>\n\n\n\n
\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e19\u0e31\u0e49\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21 Component Menu \u0e43\u0e19\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32<\/p>\n\n\n\n
\/\/ pages\/index.js\nimport Menu from '..\/components\/Menu'\n\nexport default () => {\n return (\n <div>\n <h1>Hello! Next.js<\/h1>\n <Menu \/>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\/\/ pages\/about.js\nimport Menu from '..\/components\/Menu'\n\nexport default () => {\n return (\n <div>\n <h1>About page<\/h1>\n <Menu \/>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n\/\/ pages\/contact.js\nimport Menu from '..\/components\/Menu'\n\nexport default () => {\n return (\n <div>\n <h1>Contact page<\/h1>\n <Menu \/>\n <\/div>\n )\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\n\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e41\u0e1a\u0e1a\u0e23\u0e39\u0e1b\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32 \u0e0b\u0e36\u0e48\u0e07\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e2d\u0e07\u0e04\u0e25\u0e34\u0e01\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e44\u0e1b\u0e21\u0e32\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e44\u0e14\u0e49<\/p>\n\n\n\n
Deploy Production<\/h2>\n\n\n\n
\u0e42\u0e14\u0e22\u0e40\u0e23\u0e32\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07 Build \u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e01\u0e48\u0e2d\u0e19 \u0e0b\u0e36\u0e48\u0e07 Next.js \u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07 production \u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c .next <\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n\u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e2a\u0e31\u0e48\u0e07 start \u0e40\u0e1e\u0e37\u0e48\u0e2d Node.js server \u0e02\u0e2d\u0e07\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e47\u0e04\u0e02\u0e36\u0e49\u0e19\u0e21\u0e32 \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e39\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48 URL : http:\/\/localhost:3000\/<\/a><\/p>\n\n\n\nnpm start<\/code><\/pre>\n\n\n\n\u0e01\u0e47\u0e02\u0e2d\u0e08\u0e1a\u0e1a\u0e25\u0e47\u0e2d\u0e01\u0e19\u0e35\u0e49\u0e44\u0e27\u0e49\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e40\u0e17\u0e48\u0e32\u0e19\u0e35\u0e49\u0e04\u0e23\u0e31\u0e1a<\/p>\n","protected":false},"excerpt":{"rendered":"
\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e1c\u0e21\u0e40\u0e02\u0e35\u0e22\u0e19 React \u0e2d\u0e22\u0e39\u0e48\u0e41\u0e15\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e35\u0e22\u0e2d\u0e22\u0e39\u0e48\u0e08\u0e38\u0e14\u0e19\u0e36\u0e07 \u0e04\u0e37\u0e2d\u0e21\u0e31\u0e19 […]<\/p>\n","protected":false},"author":1,"featured_media":6088,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[74],"tags":[175],"gutentor_comment":0,"_links":{"self":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/posts\/5513"}],"collection":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/comments?post=5513"}],"version-history":[{"count":0,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/posts\/5513\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/media\/6088"}],"wp:attachment":[{"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/media?parent=5513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/categories?post=5513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/memo8.com\/wp-json\/wp\/v2\/tags?post=5513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}