? ????? Jekyll?? ??? ?? ??? ? ??? ?? Next.js? ???? ?? ??? ??? ??? ????? ?????. Jekyll? ???? ???? ?? ?? ??? ?? ??? ??? Next.js? ???? ??? ?? ??? ?? ???? ???? ?? ???? ?? ??????. Next.js? ?? ???? ?????? ?? ? ???? ?? ????? ??????.

???? Jekyll ??? ???? ??? ??? ????.

 <code>. ├─── _posts/      ...Markdown 格式的博文├─── _layouts/     ...不同頁面的布局├─── _includes/    ...可復(fù)用的組件├─── index.md     ...主頁└─── config.yml    ...博客配置</code>

??? ??? ??? Jekyll?? ???? ??????? ?????? ??? ???? ??? ??? ? ?? ?? ???? ??? ??? ? ????.

Jekyll? ???? ?? ?? ?? ???? ?? ? ??? ? ???? ???? ?? ??? ??????. ??? ??? Jekyll Quick Start Guide? ??????.

? ????? RECT? ?? ??? ??? ?????. ??? ?? ?? React Getting ?? ???? ??????.

????

Next.js? React? ?????? Node.js? ???????. ??? Next.js, React ? React-DOM? ???? ?? NPM? ???????.

 <code>mkdir nextjs-blog && cd $_ npm init -y npm install next react react-dom --save</code>

?? ??? ??.js ????? ????? package.json? ???? ??? ?? ??? ???????.

 <code>"scripts": { "dev": "next" }</code>

?? npm run dev ??? ???? ???? ?? ?? ????? ??????.

 <code>$ npm run dev > [email protected] dev /~user/nextjs-blog > next ready - started server on http://m.miracleart.cn/link/4a914e5c38172ae9b61780ffbd0b2f90 Error: > Couldn't find a `pages` directory. Please create one under the project root</code>

????? Project Root ????? ??? ????? ?????? ? ? ????. ?? ???? ??? ??? ?? ?? ????.

??? ??

Next.js? ??? ??? ???? ???????. ? ???? ?? ??? ?? ??? ???? React ?? ?? (.js ?? .jsx)???. ?? ??:

<code>               路由----               ----- /pages/about.js         /about /pages/projects/work1.js     /projects/work1 /pages/index.js         /</code>

???? ?? ?????? ??? ????? ??? ?? React ?? ??? ? ?? ??? index.js? ?????.

 <code>// pages/index.js export default function Blog() { return</code> Next.js ???? ?? ?? <code>// pages/index.js export default function Blog() { return</code>
}

npm run dev ?? ??? ???? http://m.miracleart.cn/link/4a914e5c38172ae9b61780ffbd0b2f90? ???? ????????.

???? ??? ??? ????.

• Hot Reload, ?? ?? ??? ?? ????? ?? ?? ??? ????.
• /???/** ????? ?? ???? ?? ??.
• /public/** ????? ??? ? ?? ?? ???.
• 404 ?? ???.

404 ???? ?? ??? ??? LocalHost? ?? ??? ??????. 404 ???? ??? ?? ???? ?? ??.js ??? ??????.

?? ???

?? ??? ???? ????, ??? ?? ???? ? ?????. ??? ?? ??? ???? ???? ???? ???? Next.js? ?? ??? ??? ?????. ?? ??:

<code>             路由----             ----- /pages/posts/[slug].js    /posts/1              /posts/abc              /posts/hello-world</code>

/posts /1, /posts /abc ?? ?? ?? ??? /posts/=GUG] .JS? ???? ??? ?? ??? ?? ?? ??? ???? ?????. ? ??? ???? ?? ??? ??? ?? ?? ??? ??? ???? ?? ?????. ??, ??? ???? ???? ???? ?? ??? ???? ??? ? ? ????.

(?? ??? ?????. ??? ??? ?? ?? ??? ?? ???? ???? ??? ??? ??? ????? ??? ?????).

??? API, ??, ????, ????, ??? ???, ?? ?? ??, ?? ??

??? ?? ??? ??? API (?? ??? ??? ?? ??, ?? ??? ??? ?? ?? ? ?? ?? ??), ??? ??? ?? ?? (??), ??? ??? ???? (????), ???? ??? ??? ?? ? ?? ??? ??? ??? ? ?? ??? ??? ???? ???? ?? ? ?? ?? ??, ??? ? ???? ?? ?? ?? ???? ??? ???? ?? ? ?? ?? ?? ?? ?? ?? ???? ??? ?? ??? ?????. Next.js? ??? ??? ???? ?? ??? ?? ??? ??? ??????.

? ??? Next.js? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!