网站建设制作报价,机械厂网站建设方案,模板网站哪个平台好,东莞网站优化公司哪家好文章目录 安装和运行页面静态文件 React初步#xff0c;但不熟悉React也可以学习本文。
安装和运行 Next.js是一个基于React的服务端渲染框架#xff0c;可以实现构建高性能、可扩展的React应用#xff0c;提供了很多方便的工具和功能#xff0c;包括自动代码分割、服务器… 文章目录 安装和运行页面静态文件 React初步但不熟悉React也可以学习本文。
安装和运行 Next.js是一个基于React的服务端渲染框架可以实现构建高性能、可扩展的React应用提供了很多方便的工具和功能包括自动代码分割、服务器端渲染、静态文件服务、自动缩小、热模块替换等等。它还内置了一些常用的功能如处理CSS、图片、Markdown等文件。Next.js也支持使用TypeScript开发并提供一些插件来帮助开发者更好地使用TypeScript。 首先安装
npx create-next-applatest接下来按照提示逐一设置项目名都选默认值即可。
安装完成后进入项目用run运行
cd my-app
npm run dev然后根据提示打开http://localhost:3000/就可以了 npm run dev表示用开发模式启动next.js这些npm run指令与next指令的对应关系被存放在配置文件package.json的scripts中内容如下
scripts: {dev: next dev,build: next build,start: next start,lint: next lint
},其功能如下
dev 以开发模式启动 Next.jsbuild 构建用于生产环境的应用程序start 启动Next.js生产环境服务器lint 启动Next.js的内置ESLint以检查代码错误
页面
在my-app路径下新建一个pages文件夹则该文件夹内的页面可以通过文件名进行路由。例如在pages中新建一个about.js文件
function About(){return divAbout/div
}export default About然后输入http://localhost:3000/about就可以自行跳转到这个页面。 通过Link组件可以实现站内跳转将about.js和page.js中的内容分别修改如下
//about.js
import Link from next/linkfunction About(){return (divLink href/主页/LinkpAbout/p/div)
}
export default About// page.js
import Link from next/link
export default function Home() {return (main classNameflex min-h-screen flex-col items-center justify-between p-24Link href/aboutabout/Link/main)
}即主页用/“来表示而pages下的页面通过”/xxx来表示跳转效果如下 静态文件
在public路径下添加的文件可通过/作为起始路径来访问例如将about.js代码修改如下
import Link from next/link
import Image from next/imageexport default function About(){return (divLink href/Image src/next.svg width{300} height{60}//LinkpAbout/p/div)
}其中next.svg是public中的图片将这个图片放在链接中效果如下
