[Node.js] 學習筆記Next.js CSS撰寫

Node.js+Next.js+React.js

Node.js學起來也是蠻快就能上手，只是在學習的過程中，轉換寫法有點辛苦。前端最重視的就是美觀，想到美觀就想到CSS設計，因為網路資源目前不多，所以邊看邊練習後統整一下寫法，至於哪個比較好維護，還要看專案的大小和架構。

其實一開始有點混亂NextJs和ReactJs的關係
轉換成熟悉的程式語言應該是如下圖

一、初始化網頁

 　
　export default () => ( 　　<div>Welcome to next.js!</div>
　)

每個檔案export default 只能有一個
RUN Node.js指令後就會出現Welcome文字

一開始練習，所有東西都會寫在default，
當越來越熟悉後，為了後續的維護其開發可以改成以下寫法：

　const APP = () => ( 　　　
　　　　<div>Welcome to next.js!</div>
　　);
　
　export default APP;
　

備註:
(1) 給default 後面命名
(2) const 為設定一個變數前宣告用的

二、CSS撰寫

在網路上看後，找到一個是import css

 　
　import css from 'next/css';

不過卻出現以下的錯誤訊息：

Error: 'next/css' has been removed in Next.js 2.0. Please refer to the migration guide: https://github.com/zeit/next.js/wiki/Migrating-from-next-css

很明顯是因為版本改了，這個寫法已經不存在了

因此，在撰寫的時候記得注意Next.js的版本

CSS寫法一

嵌入<style jsx></style>在DOM中並命名ClassName

 　
const APP = () => ( <div className="root">Welcome to next.js!2 <style jsx>{` .root { color: blue; }`}</style> </div> );

這與我以前學的將CSS與DOM分開的理念有所不同

這裡就是強調緊密結合，所以都會這樣撰寫。

CSS寫法二

利用JSXStyle，它是將CSS封裝，撰寫方式雷同

import _JSXStyle from 'styled-jsx/style' onst APP = () => ( <div id='test'>Welcome to next.js!

<_JSXStyle css={`div[id=test] {color: red;}`} />

</div> );

(1) 先import JSXStyle
(2) 在<_JSXStyle>裡，搭配過去CSS+JQUERY的邏輯
div[id=test] ：找到div且id名稱為test
{color:red;} ：將文字改成紅色




CSS寫法三

將CSS設計import進來，也就是在另一個檔案設計好格式後
載入到當前的頁面帶入變數，既可以分離又可以簡短程式碼。

另開一個頁面在pages資料夾下，命名為styles.js

 　
/* style.js 用來設計CSS樣式*/ export const button = `button { color: blue; }` export const div = `.root { color: red; }`

在index.js

 　
import styles, { div } from './styles' const APP = () => ( <div id='test' className='root'>Welcome to next.js!
<style jsx>{div}</style> </div> ); export default APP;

(1) import styles及div這個變數，
　　因為是從styles取出來的所以加上{}括弧。

(2) 結合上面CSS寫法一使用<style jsx></style>

參考資料：
zeit/next.js

[線上讀書會] 一村 nextjs x wolke lin universal-router x andy livemap fb登入 三連打