Exercises

Fixing our Hit Counter

Earlier, we built a hit counter:

Unfortunately, this hit counter has the same problem that our “Server Timestamp” has—it works fine in development, but gets frozen in time in production.

Your mission is to update the code so that it works in production.

Link to exercise code:

Download from Github (opens in new tab)

No CodeSandbox link this time, sorry! You'll need to do this one locally, so that you can run a local build and serve in production.

Acceptance Criteria:

When running the production build (npm run build and then npm run start), the hit counter should continue to function correctly, increasing by 1 for every page visit.

Solution:

Note: We cover some new ground in this video, digging deeper into the .next directory and inspecting the build output. I suggest giving this one a watch even if you solved the exercise!

Failed Vercel deploys (warning)

If you try to deploy this solution on Vercel, you'll wind up getting an error:

Error: ENOENT: no such file or directory, open '/var/task/src/database.json'

The error message tells us that the src/database.json file can't be opened because it doesn't exist. But hm, where did it go? Why doesn't it exist??

Here's the problem: To save time, Vercel doesn't automatically upload all of the files in our repository to the live server environment. It only uploads the files that it can tell are being used. It does this through a process known as file tracing.

In this situation, Vercel isn't smart enough to realize that the /src/database.json file is actually being used in production. And so, it doesn't get uploaded. When a user visits the page, the app tries to open a file that doesn't exist.

To solve this problem, we need to explicitly tell Next to include this database.json file with the deploy. We can do this by creating (or modifying) a next.config.js file, and adding the following configuration:

module.exports = {
  outputFileTracingIncludes: {
    '/*': ['./src/database.json'],
  },
};

outputFileTracingIncludes allows us to specify which files should be included on a route-by-route basis. Here, we're saying that the '/src/database.json' file should be made available for all routes (represented by the wildcard /*).

Essentially, we're telling Next: Hey, this application requires this random JSON file, please upload it along with the compiled application during deployment.

You can learn more about this configuration option in the Next.js docs (opens in new tab).

Note that, as mentioned earlier, this hit counter won't actually work in production, because all uploaded files are read-only; we can't edit the database.json file. You'd need to store the # of hits in a real database.