react 开发 next.js rn
<p>------------恢复内容开始------------</p><p>------------恢复内容开始------------</p>
<p>Next.js 是一个轻量级的 React 服务端渲染应用框架。有了它我们可以简单轻松的实现React的服务端渲染，从而加快首屏打开速度，也可以作SEO（收索引擎优化了）。在没有Next.js的时候，用React开发需要配置很多繁琐的参数，如Webpack配置，Router配置和服务器端配置等....</p>
<p>可以手动创建 也可以<code class="language-js"><span class="hljs-keyword"> <span class="hljs-keyword">create-<span class="hljs-keyword">next-app</span></span></span></code>脚手夹创建</p>
<p><span style="background-color: rgba(255, 255, 0, 1)">一：手动创建是手动创建文件夹 npm init初始化后手动下载相关包</span></p>
<pre><code class="language-shell">npm install --<span class="hljs-built_in">save react react-dom <span class="hljs-built_in">next</span></span></code></pre>
<p> </p>
<pre><code class="language-JSON"> <span class="hljs-string">"scripts": {
<span class="hljs-string">"test": <span class="hljs-string">"echo \"<span class="hljs-keyword">Error: <span class="hljs-keyword">no <span class="hljs-keyword">test specified\<span class="hljs-string">" && exit 1",
<span class="hljs-string">"dev" : <span class="hljs-string">"next" ,
<span class="hljs-string">"build" : <span class="hljs-string">" next build",
<span class="hljs-string">"start" : <span class="hljs-string">"next start"
},<br><br></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<pre><code class="language-js"><span style="background-color: rgba(255, 255, 0, 1)">二：脚手架 npm </span><span class="hljs-keyword"><span style="background-color: rgba(255, 255, 0, 1)">install -g </span><span class="hljs-keyword"><span style="background-color: rgba(255, 255, 0, 1)">create-</span><span class="hljs-keyword"><span style="background-color: rgba(255, 255, 0, 1)">next-app</span><br><br><span style="background-color: rgba(255, 204, 153, 1)">1，创建项目 ：</span></span></span></span></code><span style="background-color: rgba(255, 204, 153, 1)"><code class="language-s"><span class="hljs-string">npx <span class="hljs-built_in">create-next-app <span class="hljs-string">next-create,<br>2，</span></span></span></code><em><code class="language-s"><span class="hljs-string"><span class="hljs-built_in"><span class="hljs-string">启动项目：<code>yarn dev</code>来测试项目。</span></span></span></code></em></span></pre>
<pre><em><code class="language-s"><span class="hljs-string"><span class="hljs-built_in"><span class="hljs-string"><img src="https://img2020.cnblogs.com/blog/2113804/202012/2113804-20201202110619009-16697252.png"></span></span></span></code></em></pre>
<p> </p>
<p><span style="background-color: rgba(255, 204, 153, 1)"><code>4，http://localhost:3000/blog/nextBlog</code>,其实只要在<code>pages</code>文件夹下再建立一个新的文件夹<code>blog</code>，然后进入<code>blog</code>文件夹，新建一个<code>nextBlog.js</code>文件，就可以实现了。 ,</span></p>
<p><span style="background-color: rgba(255, 204, 153, 1)">5，<em><code class="language-s"><span class="hljs-string"><span class="hljs-built_in"><span class="hljs-string">路由跳转方式</span></span></span></code></em></span></p>
<pre><em><em><code class="language-s"><span class="hljs-string"><span class="hljs-built_in"><span class="hljs-string"><img src="https://img2020.cnblogs.com/blog/2113804/202012/2113804-20201202111247095-1920803752.png"></span></span></span></code></em></em></pre>
<p><span style="background-color: rgba(255, 204, 153, 1)">6， <code>Next.js</code>框架中提供了<code>getInitialProps</code>静态方法用来获取远端数据，这个是框架的约定，所以你也只能在这个方法里获取远端数据。不要再试图在声明周期里获得，虽然也可以在<code>ComponentDidMount</code>中获得，但是用了别人的框架，就要遵守别人的约定</span></p>
<p><span style="background-color: rgba(255, 204, 153, 1)"><img src="https://img2020.cnblogs.com/blog/2113804/202012/2113804-20201202112737255-975183443.png"></span></p>
<p> </p>
<p> </p>
<p><span style="background-color: rgba(255, 204, 153, 1)"> ,7，<em id="__mceDel"><code>Next.js</code>默认是不支持CSS文件的，它用的是<code>style jsx</code>，也就是说它是不支持直接用<code>import</code>进行引入<code>css</code>的。</em></span></p>
<p><img src="https://img2020.cnblogs.com/blog/2113804/202012/2113804-20201202113044287-1263029169.png"></p>
<p> </p>
<p><span style="background-color: rgba(255, 204, 153, 1)">8， next，js不支持按需加载需要配置</span></p>
<p><img src="https://img2020.cnblogs.com/blog/2113804/202012/2113804-20201202113157393-1943748227.png"></p>
<p> </p>
<p> </p>
<p> </p>
<pre><em id="__mceDel"><code class="language-s"><span class="hljs-string"><span class="hljs-built_in"><span class="hljs-string"> </span></span></span></code></em></pre>
<p>------------恢复内容结束------------</p><br><br>
来源：https://www.cnblogs.com/lanlanwb/p/14072802.html
頁:
[1]