import Link from "next/link";
export default function Home() {
return (
<Link prefetch=true href="/weather">Weather</Link>
<Link prefetch=false href="/about">About Us</Link>
</div>
其他一些属性包括scroll 属性（默认为true ），当用户用<Link> 重新定位时，它会将用户导航到页面的顶部。这是一个非常合理的默认值，尽管你可能想要关闭它，以达到你想要的更具体的效果。
另一个值得注意的属性是replace ，它的默认值是false 。如果设置为true ，当你用<Link> ，导航到一个新的页面/路径时，它会替换历史栈中的最新条目，而不是推送一个新条目。
预先渲染页面
说到预取和预渲染页面--Next.js的这一功能是比较贴切的。同样，在默认情况下，Next.js会预取你链接的所有页面，以便在它们之间进行平滑、快速的转换。
对于每个页面，你可以选择 服务器端渲染或 静态生成而使用哪种技术则取决于你用来获取数据的函数。你不会被强迫在整个应用程序中坚持使用这些技术中的一种
在SSR和SG之间的选择是一个关于你想把负载放在哪里的问题，这两种技术都是对页面进行预渲染，只是方式不同。
如果你在服务器端渲染你的页面，它们将在每个请求中被渲染，使用你的服务器资源，并发送给终端用户。如果你静态地生成一个页面，它就会被生成一次，并且在构建时间之后可以重复使用。
**注意：**一般来说，你想在没有必要使用 静态生成只要不需要使用 服务器端渲染因为页面可以被缓存和重用，从而节省宝贵的计算。每当页面上的组件频繁出现时，就需要进行服务器端渲染，在请求时用新数据（有些可能取决于请求本身）渲染页面。
你也可以决定让页面上的一些页面或元素通过以下方式呈现 客户端渲染渲染，这将负载放在最终用户的机器上，但你不能保证也不能控制他们的资源，所以通常情况下，你要避免在他们那里进行任何密集的计算。
预渲染在实践中意味着什么？
这对终端用户有什么影响，它是如何改善一个普通的React应用的？预渲染允许用户在加载任何JavaScript代码之前看到页面。JavaScript的加载需要很短的时间--但这几毫秒会不经意地影响我们的感知。尽管一旦所有组件被加载进来，页面就会以用户看到的样子显示出来--但它们都还没有工作。
只有当页面被显示出来后，这些组件才会被处理和加载，成为交互式组件。这个过程被称为 补水.
如果没有Next.js，当JavaScript加载时，页面将是空的，而组件正在被初始化。
由于预渲染是Next.js的一个组成部分，我们将看一下你可以用来促进预渲染的一些功能，包括通过SSR和SG。
获取服务器端数据 -getServerSideProps()
getServerSideProps() 函数被用来执行与服务器相关的操作，比如从外部API获取数据。同样，当页面上的数据快速变化时，你想执行SSR，而缓存它是没有意义的。例如，一个API可能会响应更新的股票价格，或每秒钟的时钟时间，以及用户的每次请求--这些都应该是最新的。
下面是一个例子，它向一个样本API发送请求，并将收到的数据作为一个道具传递给我们的页面组件。
const Weather = ({temperature}) => {
export default Weather
export async function getServerSideProps() {
const res = fetch('http://example.com/api')
const temperature = res.temperature
return {
props: {temperature},
getServerSideProps() 收到一个context 对象，其中包含与服务器相关的信息，如传入的请求、服务器响应、查询。这很关键，因为渲染本身可能取决于context 。
静态生成路径 -getStaticPaths()
我们使用getStaticPaths() 函数来定义一个动态路由应该静态生成的路径列表。假设我们有一个动态路由pages/weather/[city].js ，我们在这个文件中导出一个getStaticPaths() 函数，如下图所示。
export async function getStaticPaths() {
return {
paths: [{ params: { id: "paris" } }, { params: { id: "london" } }],
Next.js会在构建时自动为我们静态生成/weather/paris 和/weather/london 。
静态生成道具 -getStaticProps()
getStaticProps() 函数与getServerSideProps() 类似，我们用它来加载预渲染页面上的道具。然而，在这种情况下，道具是在构建时静态生成的，并在以后的所有请求中重复使用，而不是在请求时渲染。
export async function getStaticProps() {
const res = await fetch('http://someapi/toget/cities')
const cities = await res.json()
return {
props: {
cities,
注意： getStaticPaths() 不能与getServerSideProps() 一起使用--相反，请使用getStaticProps() 。最好只在需要预渲染的数据快速加载或可以公开缓存的情况下使用这个功能。
*<头部/>*与SEO
由于单页应用程序很难被搜索引擎抓取，因此为搜索引擎优化React应用程序可能是困难的。虽然Next.js的服务器端渲染解决了这个问题，但该框架还包括一个特殊的<Head /> 组件，可以简单地将元素附加到页面的头部。
因此，更新你的应用程序页面的SEO设置，如标题标签、元描述以及你在标准HTML<head> 标签中包含的任何其他元素，都变得更加容易。
import Head from "next/head";
const Contact = () => {
return (
<title>Contact</title>
<meta name="description" content="Welcome to our contact page!"/>
</Head>
</div>
export default Contact;
用Next.js创建API路由
Next.js还提供了一个功能，可以在你的项目中开发你自己的API，其过程与创建页面的过程相似首先，你需要在/pages （即/pages/api ）下创建一个新的api 子目录，这个目录中的任何文件都将被路由到/api/* 。
比如，我们创建一个文件/pages/api/weather.js 。一个端点可以立即被访问为/api/weather 。
为了让这些端点工作，你必须为每个端点导出一个默认的handler() 函数（请求处理程序），它接收两个参数：req （传入请求），和res （服务器响应）。
为了尝试这一点，让我们用以下内容更新我们的/pages/api/weather.js 例子。
export default function handler(req, res) {
res.status(200)
res.json({
city: "London",
temperature: "20",
description: "sunny",
如果我们访问或发送请求到/api/weather ，我们应该看到返回伦敦的假天气信息，以及一个200 响应代码。
在某些时候，你可能想加载图片、视频、字体等资产。所有Next.js项目都有一个名为/public 的目录用于此目的。
/public 目录中的文件可以从你的应用程序中的任何地方访问，只要在源文件前面加上基本的URL (/)即可。
例如，如果我们在/public/weather-icon.svg 下有一个文件，我们可以在任何组件中访问它。
const WeatherIcon = () => {
return <img src="/weather-icon.svg" alt="Weather Icon"/>
export default WeatherIcon
Next.js 环境变量
环境变量是在我们的应用程序之外设置的变量，我们主要用它们来保存敏感数据，如API密钥或服务器配置，以避免将它们推送到Github、GitLab等版本控制工具。
Next.js提供了对环境变量工作的支持，通过一个.env.local 文件。这个文件中的所有变量都被映射到process.env 。
如果我们有一个带有以下变量的.env.local 文件。
WEATHER_API_KEY=abcd123
CITY_API_KEY=123abc
我们现在可以通过process.env.WEATHER_API_KEY 和process.env.CITY_API_KEY 来访问它们。
另外，环境变量默认不在浏览器中暴露，只能在Node.js环境中访问（在服务器端）。然而，我们可以选择将它们暴露在客户端，方法是在首选变量前加上NEXT_PUBLIC_ 。例如，如果我们有一个变量。
NEXT_PUBLIC_CITY_API_KEY=123abc
这个变量现在可以通过process.env.NEXT_PUBLIC_CITY_API_KEY ，在我们应用程序的任何地方访问。
用Next.js构建一个天气应用程序
我们已经讲了很多内容了!巩固新知识最好是通过实践，所以创建一个应用程序来补充新理论是很有帮助的。
我们将建立一个天气应用程序，检测用户的城市，并根据该信息显示天气信息。此外，我们将实现一个功能，允许用户在任何时候保存特定的天气信息，并在以后访问它。
该应用程序将看起来像这样。
如果你还没有，用下面的命令创建一个新的Next.js应用程序。
$ npx create-next-app weather-app
我们可以用以下命令启动我们的应用程序。
$ npm run dev
为了简洁起见，我们将使用Bootstrap来设置我们应用程序的界面，而不是编写自定义CSS。你可以用下面的命令安装Bootstrap。
$ npm install bootstrap
安装完成后，让我们打开pages/_app.js ，并为Bootstrap加入一个条目。
import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
export default MyApp;
注意： _app.js 文件是Next.js用来初始化页面的默认App组件。它是你所有页面组件的起点。
现在，我们可以通过改变默认字体和添加漂亮的背景颜色，使我们的应用程序在视觉上更吸引人。让我们打开styles/global.css ，并做如下修改。
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;200;300;400;500;800;900&display=swap');
body {
background: #4F32FF;
color: #fff;
font-family: 'Be Vietnam Pro', sans-serif;
这就足以让我们开始行动了!让我们来定义我们的页面结构和通过API获取数据时的占位符。
对于我们的前端，让我们打开pages/index.js ，定义我们主页的标记（结构）。
import Link from "next/link";
export default function Home() {
return (
className="d-flex justify-content-center align-items-center"
style={{ minHeight: "100vh" }}
<h1 className="fw-bolder" style={{ fontSize: "60px" }}>
Null City.
13 January, 2022
</div>
<div className="d-flex justify-content-between align-items-center mt-4">
<div className="pe-5">
<h2 className="d-inline">0</h2>
<sup>°C</sup>
<p className="text-info">Cloudy</p>
</div>
<img src="/1.png" alt="" width={100} draggable="false" />
</div>
</div>
<div className="d-md-flex justify-content-between align-items-center mt-4">
<button className="btn btn-success border-0 save-btn px-4 py-3">
Timestamp
</button>
<Link href="/history">
<button className="btn btn-danger border-0 history-btn px-4 py-3 ms-auto">
My History
</button>
</Link>
</div>
</div>
</div>
</div>
**注意：**你需要从我们的GitHub上下载天气图标，并将其纳入你的项目/public 。
而且，在这一点上，如果我们在浏览器中预览我们的应用程序，我们应该看到以下带有假数据的输出。
获取天气信息
我们将使用一个免费的天气API来获取用户当前的天气信息，但由于我们想显示用户当前所在城市的天气信息，我们需要使用另一个API来获取用户当前的城市，并将这个参数传递给天气API，以便获取所需的信息。
下面的图片描述了这个过程
为了获得天气信息，我们将利用 OpenWeather API，虽然他们提供了一个免费的计划，但你需要创建一个账户，以便获得API密钥。
为了检索用户的城市，我们将使用一个免费的 IP地理定位API它不需要API密钥来使用。
另外，我们要确保在页面加载后立即显示天气信息，所以Next.jsgetServerSideProps() 在这里确实派上了用场
现在，让我们在index.js ，以执行上述所有的功能。
export async function getServerSideProps() {
const ipRequest = await fetch(`http://ip-api.com/json/`)
const ipData = await ipRequest.json()
const city = ipData.regionName
const api_key = "YOUR_OPEN-WEATHER_API_KEY"
const url = `http://api.openweathermap.org/data/2.5/weather?q=${city},&appid=${api_key}&units=metric`
const weatherRequest = await fetch(url)
const weatherInfo = await weatherRequest.json()
console.log(weatherInfo)
return { props: { weatherInfo, city } }
上面的代码执行了两个异步操作。
第一个是检索用户的城市，我们将其存储在一个名为city 的变量中。
第二个是向天气API发送一个请求。
最后，我们把从天气API返回的结果，以及城市作为一个道具传递给我们的索引页。
**注意：**你需要用你自己的OpenWeather API密钥替换YOUR_OPEN-WEATHER_API_KEY 。
所需的信息现在作为我们的索引页的道具存储在weatherInfo 和city ，我们可以通过它们来访问。
export default function Home({ weatherInfo, city }) {
如果你尝试将weatherInfo 到控制台，你会注意到有很多信息被返回，包括用户的坐标和其他一些对我们的应用不需要的信息。根据我们的应用设计，我们将只需要以下数据。
用户的城市
天气描述（如阴天、小雨、下雪等）。
最后，一个基于当前温度的天气图标。当前温度在weatherInfo.main.temp ，而天气描述在weatherInfo.weather[0].description 。
所以，让我们继续用这些信息替换我们标记中的假数据。
{}
<h1 className="fw-bolder" style={{fontsize: "60px"}}>
{city}
13 January, 2022
</div>
<div className="d-flex justify-content-between align-items-center mt-4">
<div className="pe-5">
<h2 className="d-inline">
{Math.round(weatherInfo.main.temp)}</h2>
<sup>°C</sup>
<p className="text-info text-capitalize">
{weatherInfo.weather[0].description}
</div>
<div><img src='/1.png' alt="" width={100} draggable="false" /></div>
</div>
{}
我们还可以使用OpenWeather API来获得一个取决于当前温度的天气图标，只需将图标名称作为一个参数传递，幸运的是这也可以在$weatherInfo.weather[0].icon 。
因此，让我们继续用下面的代码替换图标的<img> 标签。
{}
src={`http://openweathermap.org/img/wn/${weatherInfo.weather[0].icon}@2x.png`}
{}
我们的应用程序应该可以完全运行，根据我们目前所在的城市显示当前的天气信息。
本地保存数据
现在，让我们创建一个函数来保存当前的天气信息，以及保存在浏览器localStorage 的日期和时间。每个条目将被保存为一个对象，其结构如下。
date: 'Current Date',
time: 'Current Time',
city: “User's City”,
temperature: “User's city temperature”,
description: 'Weather Description',
要做到这一点，创建一个新的函数saveWeather() （仍然在我们的index.js 文件内），代码如下。
const saveWeather = () => {
const date = new Date()
let data = {
date: `${date.getDate()} ${date.getMonth() + 1} ${date.getFullYear()}`,
time: date.toLocaleTimeString(),
city: city,
temperature: weatherInfo.main.temp,
description: weatherInfo.weather[0].description,
let previousData = localStorage.getItem("weatherHistory")
previousData = JSON.parse(previousData)
if (previousData === null) {
previousData = []
previousData.push(data)
localStorage.setItem("weatherHistory", JSON.stringify(previousData))
alert("Weather saved successfully")
上面的代码将把以前存储在localStorage.weatherHistory 中的任何数据解析为JSON，根据返回的数据类型，我们将新条目推送到一个数组中，将这个数组转换为字符串，并在localStorage.weatherHistory 中恢复它。我们需要这样做，因为localStorage 只能存储字符串，而不是任何其他数据类型。
如果你想了解更多关于localStorage 的信息--请阅读我们的《使用本地存储在浏览器中存储数据的指南》!
当然，我们想在用户点击时间戳按钮时调用这个函数，所以我们给按钮添加一个onClick 属性。
<button onClick={saveWeather}>Timestamp</button>
天气历史页面
最后，我们需要创建一个专门的页面来访问保存在我们浏览器的localStorage 中的所有天气信息。
**注意：**我们将不能使用Next.js的数据获取功能，因为localStorage 或任何其他文档对象在服务器上是不可用的，因此我们将不得不依赖客户端的数据获取。
在pages 目录下创建一个新的history.js 文件，内容如下。
import { useState, useEffect } from "react";
const History = ({}) => {
const [weatherHistory, setweatherHistory] = useState([]);
useEffect(() => {
setweatherHistory(
localStorage.weatherHistory !== undefined
? JSON.parse(localStorage.weatherHistory)
}, []);
return (
className="d-flex justify-content-center align-items-center p-3"
style={{ minHeight: "100vh" }}
{" "}
<h2>My Weather History</h2>
<div className="mt-5">
{weatherHistory.length > 0 ? (
weatherHistory.map((weather, index) => {
return (
key={index}
className="card mb-3"
style={{ width: "450px" }}
<div className="card-body text-dark">
<h5 className="card-title ">
{weather.city} - {weather.date}
<small>{weather.time}</small>
<p className="card-text">
<span className="font-weight-bold">Temperature: </span>
{weather.temperature}
<sup>°C</sup>
<p className="card-text">
<span className="font-weight-bold">Condition: </span>
{weather.description}
</div>
</div>
) : (
<p>Nothing to see here - yet</p>
</div>
</div>
</div>
export default History;
上面的代码检查localStorage.weatherHistory 是否存在，如果存在--我们解析数据并将其设置为一个新的变量weatherHistory 。如果它不存在，我们就把这个变量设置为一个空数组。
在我们的标记中，我们检查我们的weatherHistory 数组中是否至少有一个数据条目，并使用JavaScript的.map() 函数，我们遍历weatherHistory 中的所有项目，将它们显示在我们的网页上。
让我们继续点击索引页上的时间戳按钮来记录当前的天气信息，当你回到历史页面时，你应该看到这样的东西。
Next.js是一个JavaScript框架，专门用于加强和促进高性能React应用程序的开发。
在本指南中，我们介绍了该库的相关功能--如何通过Next.js的文件路由系统创建和路由，<Link> 组件如何工作，什么是预取和预渲染以及如何利用它来增强用户体验，如何轻松创建API路由和请求处理程序以及如何使用环境变量。
最重要的是，我们建立了一个天气应用程序，与外部API进行通信，以获取数据并将其显示给最终用户，允许他们将任何给定的时间戳保存到他们的本地存储。
同样，该应用程序的完整源代码可以在GitHub上找到。
