初步學習next.js-1-新建項目

react和vue做的都是單頁面應用

缺點：1.不適合SEO

　　　2.啟動慢

解決方案：next.js

 

參考技術胖的資料進行學習

https://jspang.com/detailed?id=51#toc21

1.手動創建next.js

　　創建文件夾

D:
mkdir NextDemo
npm init

　　安裝所需要的安裝包

yarn add react react-dom next

　　增加快捷鍵命令

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev" : "next" ,
    "build" : " next build",
    "start" : "next start"
  },

　　創建pages文件夾和文件

function Index(){
    return (
        <div>Hello Next.js</div>
    )
}
export default Index

　　使用yarn dev來打開預覽

 

2.使用create-next-app 來創建項目

　全局安裝create-next-app

yarn global add create-next-app

　　創建項目

npx create-next-app myCreateNext

 

3.項目結構介紹

看到結果后，用VSCode打開目錄，可以看到已經有了很多自動建立好的文件和文件夾，下面就簡單的介紹一下這些它們的用處：

 

• components文件夾:這里是專門放置自己寫的組件的，這里的組件不包括頁面，指公用的或者有專門用途的組件。

• node_modules文件夾：Next項目的所有依賴包都在這里，一般我們不會修改和編輯這里的內容。

• pages文件夾：這里是放置頁面的，這里邊的內容會自動生成路由，並在服務器端渲染，渲染好后進行數據同步。

• static文件夾： 這個是靜態文件夾，比如項目需要的圖片、圖標和靜態資源都可以放到這里。

• .gitignore文件： 這個主要是控制git提交和上傳文件的，簡稱就是忽略提交。

• package.json文件：定義了項目所需要的文件和項目的配置信息（名稱、版本和許可證），最主要的是使用npm install 就可以下載項目所需要的所有包。

　　　　

 

 

項目結構介紹

看到結果后，用VSCode打開目錄，可以看到已經有了很多自動建立好的文件和文件夾，下面就簡單的介紹一下這些它們的用處：

• components文件夾:這里是專門放置自己寫的組件的，這里的組件不包括頁面，指公用的或者有專門用途的組件。

• node_modules文件夾：Next項目的所有依賴包都在這里，一般我們不會修改和編輯這里的內容。

• pages文件夾：這里是放置頁面的，這里邊的內容會自動生成路由，並在服務器端渲染，渲染好后進行數據同步。

• static文件夾： 這個是靜態文件夾，比如項目需要的圖片、圖標和靜態資源都可以放到這里。

• .gitignore文件： 這個主要是控制git提交和上傳文件的，簡稱就是忽略提交。

• package.json文件：定義了項目所需要的文件和項目的配置信息（名稱、版本和許可證），最主要的是使用npm install 就可以下載項目所需要的所有包。