* How to make Next.js New Start

## 1. React Next.js install environment

#### create folder
:::info
mkdir learn_next_js
cd learn_next_js
:::

#### install environment
:::info
npm init -y
npm install react react-dom next --typescript
:::

## 2. modifty package.json

:::info
### vim package.json

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

:::spoiler

:::info
### dev - 執行 next dev 來啟動開發模式

### build - 執行 next build 來建立用於正式環境的應用程式
### start - 執行 next start 來啟動正式環境伺服器
### lint - 執行 next lint 來設定 Next.js 內建的 ESLint 配置
:::

## 3. first index.js in pages folder

:::info

### make pages folder

mkdir pages
cd pages

touch index.js
vim index.js

### add text in index.js on function component

:::success

import React from 'react';

const HomePage = () => {
    return(
        <React.Fragment>
            Hello Next.js!
        </React.Fragment>
    )
}

export default HomePage;

:::

## 4. run website service localhost

#### run service commands and check Browser Website start
#### commands run one
:::info
### $ npm run dev
### $ yarn dev
### $ pnpm dev
:::

#### check Website

:::info
:::success
### http://localhost:3000
:::

## 5. test modify state on index.js

:::info

import React from 'react';

const HomePage = () => {
    return(
        <React.Fragment>
            Hello Next.js!
            <br/>icewindful!!!
        </React.Fragment>
    )
}

export default HomePage;

:::

## 6. install next-image module and setting

:::info

npm install --save next-images

or

yarn add next-images

:::

* add next-image in next.config.js
:::info

vim next.config.js

* add text

:::success
**Please note**: If you have issues with a file suffix not included in our default list
(["jpg", "jpeg", "png", "svg", "gif", "ico", "webp", "jp2", "avif"]), we won't be able to guarantee bug support.

Example usage:

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  fileExtensions: ["jpg", "jpeg", "png", "gif"],
  webpack(config, options) {
    return config
  }
})
:::

* setting public/images 

:::info
:::success

mkdir public
cd public
mkdir images
cd images

* copy image to this folder (/public/images)
:::

:::warning
if want to how to setting install module README.md
how to set config
:::

### 7. vscode if want ts (typescript)

#### prefermance --> setting --> serach "javascript.validate"

:::info
uncheck javascript.validate

:::spoiler 參考資料
https://stackoverflow.com/questions/48859169/error-types-can-only-be-used-in-a-ts-file-visual-studio-code-using-ts-che
:::

### 8. customs out build in next.js.config
:::info
#### vim next.js.config
:::
#### add text

this build is folder name build
:::success

module.exports = { distDir: '/build'}

:::