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.

Sign up for GitHub

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

Jump to bottom

Update migrating from Gatsby docs. #17636

Merged
merged 5 commits into from Oct 5, 2020
Merged

Update migrating from Gatsby docs. #17636

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b001808
Update migrating to Gatsby docs.
leerob Oct 5, 2020
81e872e
Added update for requested changes
lfades Oct 5, 2020
9a59e9b
change
lfades Oct 5, 2020
3e94f52
Update docs/migrating/from-gatsby.md
lfades Oct 5, 2020
e0ccdab
Update docs/migrating/from-gatsby.md
lfades Oct 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/migrating/from-gatsby.md
View file
Open in desktop
Expand Up @@ -52,7 +52,7 @@ Both Gatsby and Next support a `pages` directory, which uses [file-system based
Gatsby creates dynamic routes using the `createPages` API inside of `gatsby-node.js`. With Next, we can use [Dynamic Routes](/docs/routing/dynamic-routes.md) inside of `pages` to achieve the same effect. Rather than having a `template` directory, you can use the React component inside your dynamic route file. For example:

- **Gatsby:** `createPages` API inside `gatsby-node.js` for each blog post, then have a template file at `src/templates/blog-post.js`.
- **Next:** Create `pages/blog/[slug].js` which contains the blog post template. The value of `slug` is accessible through a [query parameter](/docs/routing/dynamic-routes.md). For example, the route `/blog/first-post` would forward the query object `{ 'slug': 'first-post' }` to `pages/blog/[slug].js` ([learn more here](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation`)).
- **Next:** Create `pages/blog/[slug].js` which contains the blog post template. The value of `slug` is accessible through a [query parameter](/docs/routing/dynamic-routes.md). For example, the route `/blog/first-post` would forward the query object `{ 'slug': 'first-post' }` to `pages/blog/[slug].js` ([learn more here](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation)).

## Styling

Expand Down Expand Up @@ -169,7 +169,7 @@ export default {

## Search Engine Optimization

Most Gatsby examples use `react-helmet` to assist with adding `meta` tags for proper SEO. With Next.js, we use [`next/head`](/docs/api-reference/next/head.md) to add `meta` tags to your `<head />` element. For example, here's an SEO component with Gatsby:
Most Gatsby examples use `react-helmet` to assist with adding `meta` tags for proper SEO. With Next.js, we use [`next/head`](/docs/api-reference/next/head.md) to add `meta` tags to your `<head />` element. For example, here's how a SEO component with Gatsby looks like:
lfades marked this conversation as resolved.
Show resolved Hide resolved

```js
// src/components/seo.js
Expand Down Expand Up @@ -250,4 +250,4 @@ export default function SEO({ description, title }) {

## Learn more

Please take a look at [this pull request](https://github.com/leerob/gatsby-to-nextjs/pull/1) to learn more. If you have questions, please ask on [our discussion board](https://github.com/vercel/next.js/discussions).
Take a look at [this pull request](https://github.com/leerob/gatsby-to-nextjs/pull/1) for more details on how an app can be migrated from Gatsby to Next.js. If you have questions or this guide didn't work for you, feel free to reach out to our community on [GitHub Discussions](https://github.com/vercel/next.js/discussions).
lfades marked this conversation as resolved.
Show resolved Hide resolved