[Day28] 又回到最初的起点 ～ Next.js

前言

终於在 Day28 的文章提到标题的 Next.js 了XD
这也是本系列文的源头，我开始学前端框架 Bootstrap, React 的起点。
今天的文章没有教学，(结果发完文回过头来看发现自己这句话好像有点打脸XD?)
想带大家体验我 Day1 说的，
在我都还没学 Bootstrap, React 之前就用 Next.js 当起手式是什麽感觉XD
对 Next.js 有兴趣的还可以参考之前大大在铁人赛写的文章→ Next.js 功能及介绍

本日正文

先直接带大家在 local 端安装布署 Next.js 的环境。

前置作业：initial Github

建议搭配 Github 环境进行後续安装，
因此这边我先在 local 端 initial Github 环境。
(其实 Codesandbox 也有 Next.js 的 project template 啦，
但想带一次从零开始的完整流程，
所以我选择在 local 端操作)

(注：如果之後没有要跟别人远端协作，下面第 2-4 步骤不用做)

1. local 端 initial Git 环境
   先在 local 端开好资料夹，
   到 Git 视窗移到该目录底下执行以下指令：

git init

2. 到 Github 新增 Repository
   

3. 将 Github 跟 Git 连结起来
   到 Git 视窗执行以下指令：

git remote add origin https://github.com/Misado/这边看你的网址是什麽.git

4. 测试丢一个档案看看，有没有连结成功

$ touch test.txt
$ git add .
$ git commit -m "test"
$ git push origin master

在 local 端丢的档案在 Github 有出现了~~~

正式作业：initial Next.js

其实 Next.js 的教学文件满佛心的，
直接跟着一步一步做即可。
Create a Next.js App

1. Create a Next.js app
   到前面 local 端开好的资料夹(例如我刚刚开的是test0930)执行以下指令：

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

这时候你会发现 test0930 目录底下多出了一些东西：

这就是你第一个 Next.js 的服务哦XD

2. 开启服务
   然後接着按照文件所说移到 nextjs-blog 目录後，再执行 npm run dev 命令开启服务吧！

cd nextjs-blog
npm run dev

这时候你会发现视窗出现了一些讯息，
看起来服务似乎在运作罗！

3. 到浏览器看看成果吧！
   Next.js 开启的服务预设在 3000 port，
   所以打开浏览器输入 http://localhost:3000 来看看成果吧！
   

哇，看起来好像很容易就把一个网页服务架起来了~~~ (欢呼)

那我们打开 nextjs-blog/pages 底下的 index.js 看看程序长什麽样子吧~
(PS. 页面都会在 pages 目录底下)

举凡 import、export、return、className......
有没有觉得这根本就是我们前几天一直看到的 React 写法！
是的没错，
Next.js 是以 React 为基底的套件框架，
所以 React 的语法放在 Next.js 框架里面当然是没有问题。

额外挑战：把之前写过的程序放到 Next.js APP 里面

不过今天文章如果光只是把 Next.js 的环境架起来这样好像太容易了，
我想把之前写过的 code 试着放上来看看！

先在 pages 目录底下新增一个 0930.jsx 的档案，
把昨天 Day27 的程序原封不动贴进去 0930.jsx 的档案，
像这样：

然後再到浏览器输入 http://localhost:3000/0930
发现有错误，

Error: The default export is not a React Component in page: "/0930"

这是因为我们之前的写法都是把这些页面写成 component export 出去，
然後在 App.js 里 import 使用，
我们如果要直接在这里渲染页面，
稍微改一下语法就好，

export const Game = () => {

把这行直接改成：

export default function Game() {

再让我们看一次成果吧！

可以了！！！

那我们现在打开 nextjs-blog/pages 底下的 0930.jsx 看一下整个程序的样子吧~

我刚开始接触 Next.js 时看到的程序就大概是长这种样子，
就在我连 React 不会的情况下，
看到这些程序根本黑人问号啊XDDDDDDDDD
我搞不清楚这些语法到底是 Next.js 独有的还是什麽XD
(那时候我连 React 也不知道，所以我连它是不是 React 语法的这个疑问都没有XD)

我记得当时的我只觉得「天啊，好难，这什麽!!!!!!」XD
而且那时候我连 Bootstrap 也还不会，
所以我还记得当时的我就算要查资料，
我也不知道到底该查 Next.js? React? React.js? Bootstrap? Reactstrap?
傻傻分不清楚XD
(当然现在终於搞懂了啦orz)

因为我跌跌撞撞走过这些流程，
所以我强烈建议大家要碰 Next.js 之前，
拜托先去学 React，
还有 Bootstrap XD

後记

很多人在 1 号就准时开赛，
所以今天很多人就完赛了XD
我还有两天，加油!!!!!!!!!!!!!