学习Next.js：入门

原始文档位于https://github.com/developerw...现在移动到这里。学习Next.js：入门学习Next.js：在页面之间导航学习Next.js：使用共享组件学习Next.js：创建动态内容学习Next.js：使用路由掩码创建干净的URL学习Next.js：服务器支持cleanURLsLearningNext.js:获取数据LearningNext.js:Deploywhichscoreshigh,helpcreateaNext.jsTag,谢谢.现在暂时放在reactjs标签下。新建文章有时间限制，过段时间全部发上来。这是这两天翻译的Next.js学习资料。原文章创建于http://learnnextjs.com单页Javascript应用程序是一件非常具有挑战性的事情。幸运的是，开源世界为我们提供了一些有用的工具来简化和加速单页应用程序的开发。CreateReactApp就是这样一个工具。EvenWell，创建单页应用程序的学习曲线非常高。我们还需要学习客户端路由、页面布局等，如果你还想运行服务端渲染（SSR：ServerSideRendering），事情就变得比较困难了。因此，我们需要一个简单且可定制的解决方案。想一想我们如何使用PHP创建Web应用程序。首先创建一些文件，编写PHP代码，然后部署。不用担心路由，Web应用只是在服务器上但是这里我们不是在谈论使用PHP创建Web应用，我们使用Javascript和React，并使用Next.js框架为我们提供能力：server-侧渲染（默认）自动代码切分，加速页面加载简单的客户端路由（基于页面）基于Webpack的开发环境，支持热模块替换（HMR：HotModuleReplacement）可以使用Express或其他Node.js服务器实现使用Babel和Webpack配置自定义设置Next.js可以在RunsonWindows、Mac和Linux中找到。您只需在系统上安装Node.js即可开始构建Next.js应用程序。除了用于编写代码的文本编辑器和用于调用命令的终端之外，不需要其他任何东西。如果在Windows上运行，建议使用Pow呃外壳。Next.js可以在任何shell和终端中工作。但在本指南中，我们使用与UNIX相关的命令。建议使用Windows下的PowerShell以简化工作。运行以下命令创建示例项目：mkdirhello-nextcdhello-nextnpminit-ynpminstall--savereactreact-domnextmkdirpages然后打开package.json，添加如下NPM脚本命令：{"scripts":{"dev":"next"}}现在，一切就绪，您可以运行以下命令来启动开发服务器。npmrundev在浏览器中打开：http://localhost:3000.404页面打开http://localhost:3000，我们看到一个404页面。此时，Next.js没有任何作用。默认为404页面。创建第一页现在让我们创建第一页。在pages目录中创建一个名为index.js的文件，内容如下：constIndex=()=>{return(

)}exportdefaultIndex或者constIndex=()=>()exportdefaultIndex现在，再次访问http://localhost:3000，你会看到“HelloNext.js”。js”在页面上。在这里，我们刚刚导出了一个SimpleReact组件。同样的，你可以自己写一个模块并导出。确保你的React组件默认是导出的。p>HTML标签），如下：constIndex=()=>()exportdefaultIndexpagewilldisplayasyntaxerrorThere'sanerror显示语法错误。默认情况下，Next.js会直接在浏览器中显示这些错误信息，方便您快速识别错误并修复。你但你解决了这些错误，页面将执行无刷新更新。这要归功于Webpack提供的模块热替换功能，Next.js默认支持，你太棒了！看起来您已经构建了您的第一个Next.js应用程序。有什么想法吗？如果您愿意，请随时深入挖掘。Bugfix2017-10-11：修复了Index(...)等问题：渲染未返回任何内容。这通常意味着缺少返回语句。或者，要不渲染任何内容，请返回null。