Introduction tutorial to Next.js is outdated and have errors.

[orassayag]

Bug report

Module not found: Can't resolve 'fs'

Describe the bug

When doing the intrudction toturial to Next.js there are several bugs.
In the section of 'Pre-rendering and Data Fetching' (called 'Implement getStaticProps' on the side menu):
https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops

Following step by step by this tutorial, you will get
Module not found: Can't resolve 'fs' error from the lib/posts.js.
and map of 'allPostsData' is undefined.

Steps to reproduce the behavior, please provide code snippets or a repository:
Do the tutorial until the step of:
https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops

Expected behavior

Will show the posts.

Screenshots

System information

• Windows 10
• Browser Chrome Version 87.0.4280.66 (Official Build) (64-bit)
• Version of Next.js: "next": "^10.0.0"
• Version of Node.js: v14.15.1

Additional context

I solved the issue by this link:
#7755

Need to add next.config.js file with:

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}

P.S, A general opinion on this tutorial - It's really good, but if you can:

1. I really really really think you should update the syntax in this tutorial, use arrow functions in components, instead using 'function' syntax.
2. And please, add semi columns to all the code examples. Thanks :)

[lfades]

@orassayag There were some steps that weren't very clear on that pasting some code would break the page until you pasted the code of the next step. Module not found: Can't resolve 'fs' was one of those cases (happened after adding an import of a Node.js module, but not using it inside getStaticProps).

I've added multiple updates to places where bad situations like that could happen and also more additional updates to make sure every step is more clear than before regarding what code do you have to change and where.

Thank you for the issue report!

[orassayag]

@orassayag There were some steps that weren't very clear on that pasting some code would break the page until you pasted the code of the next step. Module not found: Can't resolve 'fs' was one of those cases (happened after adding an import of a Node.js module, but not using it inside getStaticProps).

I've added multiple updates to places where bad situations like that could happen and also more additional updates to make sure every step is more clear than before regarding what code do you have to change and where.

Thank you for the issue report!

Glad to help :)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.