Next.js advanced scaffolding-Zeit Now deployment

Next.js advanced scaffolding-Zeit Now deployment

Next.js advanced scaffolding series

Preface

I haven't written an article for a long time, and I haven't learned anything lately. It's a bit wasteful. Try to learn some new things, GraphQL, Gatsby, Netlify, etc. (maybe not new to many people). When I learned about Netlify, I found that it is very suitable for deploying static websites, so I tried to deploy and found that it is really simple. You only need to fill in a few commands to complete the deployment of static websites. Free hosting is simply better than gh pages. Also convenient. So after trying a few static websites, such as Zhou Gongzi s Garden , it is one-click deployment.

Then I thought, try to deploy some projects. First of all, I want to deploy this Next-Antd-Scaffold scaffolding. I talked about deployment before, but that deployment is conditional:

  • gh pages deployment needs to generate static files, that isnext export
  • PM2 deployment requires developers to have a server

So for the student party or beginners, they don't actually feel the complete experience of building their own station. Here I want to deploy the scaffolding through this deployment method.

Ok, as mentioned above, I want to use Nelify for deployment, so I think too much, or I didn't do my homework. Although Netlify deployment is very simple, it did not succeed. The process is as follows:

  • The first step is to select a warehouse

  • The second step is to deploy the configuration

  • The third step, in deployment

  • The fourth step, the deployment is complete (failure)

As you can see, the deployment is completed, and the address assigned to us by netlify is alive. When I visit it, oh no~ failed. I don t know the reason. Mainly, it does not provide error logs. So this scaffolding actually uses node to obtain data dynamically. There may be part of the reason, and there is no index.html in the folder after the build, and there is no need to worry about it, because the subject of this article is now deployment.

The address that is not very good-looking was assigned by netlify. You can also customize it through site settings, which is really convenient.

Now deployment

There is excuse for the above failure. Who makes oneself lazy? Why do you say that? Next.js was originally a project of the zeit warehouse , and correspondingly, the zeit warehouse also has a now project, which is dedicated to deployment. It is very, very NB, I have to admire the big cows~

Originally I thought it would be easy to deploy successfully, why, because there is only one command after the preparations are done, that is now, and then just wait, the result is really horrible, all kinds of problems are pitted, so share Give everyone the experience of stepping on the pit~

As you can see, the deployment failed six times, and the deployment was successful only the seventh time~ Difficulties and obstacles

As stated in advance, now-cli is very powerful and I only use it to deploy Next.js projects. In fact, it can support many deployments, as shown in the figure below.

Ready to work

The first is to install the now tool, the official download address, various versions. I am used to npm directly, and you can install it on demand.

// now
npm install -g now
 

Deploy a pit

After installation, I can t wait to try it out. I actually did it step by step in accordance with the documentation. The documentation addresses are zeit-now docs and now-next docs .

For the specifics, please read it yourself. I am just responsible for helping you step on the pit, step by step.

First attempt-add now.json

Create a new now.jsonconfiguration file and type the following code:

{
  "version": 2,
  "builds": [{ "src": "next.config.js", "use": "@now/next" }]
}
 

Then run the deployment command:

now
 

That's right, I didn't do anything, so I ran the command directly. Obviously, I failed, haha. The advantage of now is that if it fails, there will be a detailed deployment log and the reason for the failure.

OK, the reason is obvious. no serverless pagesI am not sure what this is, because the normal deployment of next.js will not have this thing, so I checked the documentation and found the following:

That is, we want to deploy the Next.js project through now, and we need to configure the target as serverless, so that's it.

2.attempt-serverless

We made the following changes to the code:

//next.config.js
...
module.exports = {
    ...
+  target: 'serverless'
    ...
}
...
 

Deploy again:

now
 

Not surprisingly, it failed again:

As you can see from the figure, it is very obvious that publicRuntimeConfig is not supported in serverless mode. As for what publicRuntimeConfig is, you can go to the official document. I won t say more here. Then I went to the Next.js document and found The following prompt document address :

The Next.js deployment document also provides precautions for now, so if we look at it carefully, we will avoid this problem. So, let's modify it, and modify all the pre-configurations in the code. There are many ways to modify, and the official also gave a plan, such as:

There is also the use of babel-plugin-transform-define or Webpack DefinePlugin .

Third attempt-modify config

ok, no problem, after successful deployment, you can directly access the online address after deployment . Preview it, there is basically no problem, I think it is quite simple, maybe I am too stupid, haha.

This time I just want to write. From the beginning to the end, it takes two hours to take screenshots. There is no technology. It is purely a free trial for students without a server.

The last branch deployed is the now branch of the scaffolding. The deployment process is to try the master branch, everyone pay attention.

The Next-antd-scaffold scaffold can be used officially, has no one raised an issue or contributed it~ Haha