React server side rendering framework next.js project combat and deployment context as solutions to problems

Toss in some time ago had built react server architecture project, click here to learn next , just recently reconstructed PC website needs to consider SEO and other factors. In doing technology selection when decided nextjs . Project development process, nextjs experience is great, personally feel even better than the create-react-app development experience, especially HMR function, although have this feature, but nextjs do better. CRA which modified the code, formatted documents, it will cause the entire page refresh, which for the SPA project development experience is very bad. I use nextjs development process, if not their own initiative to refresh your browser, almost without refreshing the entire page over, all the modifications are without refreshing the page under the premise reflected to the page, this is really great experience .

Getting experience

nextjs document written personally feel that is not particularly detailed, but fortunately there are many examples can refer to github examples directory, for example, I do not use now deployed, but the use of express. It is easy to find examples of references. Development process compilation, packaging and other fast enough, the development experience has been very pleasant.

 

Several settings in the project

1. Inside with about three-dependent:

① use nextjs when configuring multiple plug-next-compose-plugins is easy to solve, otherwise, writes in a bit of trouble

② the picture as a module as the need to introduce the use of next-images

③ style requires less support next-less

 

2. BuildId I am here to fix a direct, if later developed into the new v2 (or will do)

3. Packaging directory distDir modified to build (default is .next)

Deployment problems encountered

1. Set context to the problem of access

When deployed, I need to configure a context, because there are multiple items under a domain name. When the local root path is open, nothing issue, but now need to set a context (access format: domain / context). Modify an entry file app.js (or server.js, the project initiated by node app.js), the following results were obtained before, I toss more than 1 day, eventually by looking at some source, multi-commissioning was successful.

 

Modifications next.config.js

 

2.  the windows to the development and deployment of '\\' path on the issue of linux

Alternatively a manual approach is two pages-manifest.json file in which all paths '\\', is replaced with '/'

Another way :( recommendation)

Go above packaged in linux, so once and for all, the most convenient. Therefore, the development environment or good mac

summary

Nextjs recommended to do the rendering server-based React, though man-made wheels is also important, but the actual development of the use of an open source, a popular framework to improve development efficiency, reduce risk wiser.

Author: Zhang Xuefei
Source: https://zhangxuefei.site/p/2195
Copyright: welcome to reprint, but must indicate the source and give the original connection in the apparent position of the article page, otherwise reserved the right to pursue legal responsibilities.

Guess you like

Origin www.cnblogs.com/mszhangxuefei/p/10953962.html