Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Mention the new data fetching methods on missing places #11620

Merged
merged 2 commits into from
Apr 6, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/advanced-features/custom-error-page.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,25 +54,25 @@ If you want to render the built-in error page you can by importing the `Error` c

```jsx
import Error from 'next/error'
import fetch from 'isomorphic-unfetch'
import fetch from 'node-fetch'

const Page = ({ errorCode, stars }) => {
export async function getServerSideProps() {
timneutkens marked this conversation as resolved.
Show resolved Hide resolved
const res = await fetch('https://api.github.com/repos/zeit/next.js')
const errorCode = res.ok ? false : res.statusCode
const json = await res.json()

return {
props: { errorCode, stars: json.stargazers_count },
}
}

export default function Page({ errorCode, stars }) {
if (errorCode) {
return <Error statusCode={errorCode} />
}

return <div>Next stars: {stars}</div>
}

Page.getInitialProps = async () => {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
const errorCode = res.statusCode > 200 ? res.statusCode : false
const json = await res.json()

return { errorCode, stars: json.stargazers_count }
}

export default Page
```

The `Error` component also takes `title` as a property if you want to pass in a text message along with a `statusCode`.
13 changes: 10 additions & 3 deletions docs/api-reference/data-fetching/getInitialProps.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,13 @@ export default class Page extends React.Component<Props> {

For more information on what to do next, we recommend the following sections:

<div class="card">
<a href="/docs/basic-features/data-fetching.md">
<b>Data Fetching:</b>
<small>Learn more about data fetching in Next.js.</small>
</a>
</div>

<div class="card">
<a href="/docs/basic-features/pages.md">
<b>Pages:</b>
Expand All @@ -141,8 +148,8 @@ For more information on what to do next, we recommend the following sections:
</div>

<div class="card">
<a href="/docs/basic-features/data-fetching.md">
<b>Data Fetching:</b>
<small>Learn more about data fetching in Next.js.</small>
<a href="/docs/advanced-features/automatic-static-optimization.md">
<b>Automatic Static Optimization:</b>
<small>Learn about how Nextjs automatically optimizes your pages.</small>
</a>
</div>
2 changes: 1 addition & 1 deletion docs/api-reference/next/router.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ Router.push(url, as, options)
- `url` - The URL to navigate to. This is usually the name of a `page`
- `as` - Optional decorator for the URL that will be shown in the browser. Defaults to `url`
- `options` - Optional object with the following configuration options:
- [`shallow`](/docs/routing/shallow-routing.md): Update the path of the current page without rerunning `getInitialProps`. Defaults to `false`
- [`shallow`](/docs/routing/shallow-routing.md): Update the path of the current page without rerunning `getServerSideProps` or `getInitialProps`. Defaults to `false`

> You don't need to use `Router` for external URLs, [window.location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) is better suited for those cases.

Expand Down
2 changes: 1 addition & 1 deletion docs/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ description: Get to know more about Next.js with the frequently asked questions.

<details>
<summary>How do I fetch data?</summary>
<p>It's up to you. You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch API</a> inside your React components, or <a href="/docs/api-reference/data-fetching/getInitialProps.md">getInitialProps</a> for initial data population.</p>
<p>It's up to you. You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch API</a> or <a href="https://swr.now.sh/">SWR</a> inside your React components for remote data fetching; or use our <a href="/docs/basic-features/data-fetching.md">data fetching methods</a> for initial data population.</p>
</details>

<details>
Expand Down