# 使用Moralis建立NFT. Part 1(未完)
###### tags: `開發者路徑`
###### 兌心科技 Insight Software : 使用Moralis建立NFT. Part 1
作者 : @dhsia17

#
**1. Create Moralis Server**
進入 Moralis.io 並創建一個新帳戶，登錄後您將看到儀表板：


點擊Create a new Server 建立Server(免費版上限為一個server) :


這裡示範是使用Eth Testnet (Rinkeby) ，點選 Add Instance

選擇區域，差別不大，本文選擇新加坡。

上圖可見Dapp URL & App ID ，後續編程會使用到，目前為止Moralis的dapp server 建置告一個段落。

**2. 建立Next.js APP**

使用Node.js command prompt 輸入以下指令創建新的 Next.js 專案：

npx create-next-app my-project --example with-tailwindcss

**上面指令將設置 Next.js 並設置 Tailwind CSS 以便我們進行一些最小的樣式設置，但在本文不會介紹太多樣式的問題。

創建專案後，進入到專案目錄並使用終端機輸入以下命令安裝此項目所需的套件包：

npm install moralis react-moralis @walletconnect/web3-provider

*這將安裝moralis 核心庫以及react-moralis，會提供我們方便使用Morails功能。 @walletconnect/web3-provider 是用以連接MetaMask以外的錢包，但本文僅使用到MetaMask，僅是用來消除Moralis包的警告。

# Via NPM:
npm install --save magic-sdk

安裝 magic-sdk

**設定Moralis環境變數**

在專案目錄下建立.env，並將第一步Moralis Server URL & Appid填入

MORALIS_SERVER_URL=(server url)
MORALIS_PUBLIC_APP_ID=(application id)

接著打開專案中pages目錄下的_app.js 改成下面的內容

import { MoralisProvider } from "react-moralis";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider
      appId={process.env.MORALIS_APP_ID}
      serverUrl={process.env.MORALIS_SERVER_URL}
    >
      <Component {...pageProps} />
    </MoralisProvider>
  );
}
export default MyApp;

*透過將MoralisProvider包覆在專案的入口點, 我們可以將包含在其中的子組件都得到Moralis的功能支持。修改完之後 ，可以執行下列指令來執行專案:

npm run dev

執行成功之後，可以透過http://localhost:3000 來訪問網頁，下一步我們將建立一個連接的按鍵，可以透過Moralis本身提供的函式來連接MetaMask錢包。


http://localhost:3000 網頁如下圖，排除error即可連上metamask錢包


目前卡關的部分，再想是否為套件安裝出問題<MoralisProvider>，或appid少填了某部分，努力排除中


[文章來源](https://medium.com/@dhsia17/%E4%BD%BF%E7%94%A8moralis%E5%BB%BA%E7%AB%8Bnft-part-1-%E6%9C%AA%E5%AE%8C-8c17a5cdb69c)

#

###### About Insight Software
###### 兌心科技的專業橫跨多個領域，雲端架構、遊戲製作、區塊鏈技術、去中心化金融、醫療資訊和物聯網服務等，致力於成為企業Web2.0到Web3.0的領航員，提供**雲服務、線路、區塊鏈技術、金庫**等解決方案。

#

### 聯絡方式
兌心聯絡信箱 :
[e-mail]

### 社群
[Website](https://www.insight-software.com/)
[Medium](https://medium.com/insight-software)
[Youtube](https://www.youtube.com/@insight-software)
[Telegram](https://t.me/Insight_software)
[Twitter](https://twitter.com/insightcapital_)
[Instagram](https://www.instagram.com/insight.capital/)