fireship-io / next13-pocketbase-demo Goto Github PK

When turbopack is enabled, it complains about the appDir setting.

- Unsupported Next.js configuration option(s) (next.config.js)
  To use Turbopack, remove the following configuration options:
    - experimental.appDir

Link to Pocketbase DL in your README is incorrect. https://github.com/fireship-io/next13-pocketbase-demo/blob/main/pocketbase.io

Is there anybody out there who has solved the authentication and route protection problems, and actually share an example code?

Hello Jeff!

Thank you for all the hard work you have put in your videos. They are my go to for leasure and to learn something new.

IN your latest one: https://www.youtube.com/watch?v=__mSgDEOyv8

I noticed that when you create a note you make a fetch request from the client, I am correct to assume this URL will be exposed to the public?

Link to the line:
https://github.com/fireship-io/next13-pocketbase-demo/blob/main/app/notes/CreateNote.tsx#L20

Thanks again to Jeff (and to all the people more smarter then me).

In Firefox, when creating a new note the site crashes and an unhanded network fetch error is displayed for a split second.
Tested same instance in edge and chrome witch both worked fine.

Having issues with routing in the ./Notes.module.css and the ./CreateNote routes in the notes/page.tsx. It is not able to find the file. If I change the route on the createNote I am able to get it to work. Cannot resolve the ./Notes.module.css error.

Problem

When trying to run this codebase upon reaching the notes directory I am confronted by an error stating that it was unable to resolve relate "./Create". It is possible that this is a NEXT 13 issue as it is so new but I'm not so sure

Error

error - [resolve] [project-with-next]/app/notes/page.tsx  Error resolving esm request
  unable to resolve relative "./Create"
  
  | It was not possible to find the requested file.
  | Parsed request as written in source code: relative "./Create"
  | Path where resolving has started: [project-with-next]/app/notes/page.tsx
  | Type of request: esm request

When trying to create a new note, the following error is thrown:

Host address should be removed to .env.local for security. Just a nitpick, but it is good to practice correctly.
Something like
${process.env.HOST}
should be used in the string fields of the .tsx files and
HOST=http://xxx.xxx.xxx.xxx:8090
in the .env.local file.

I'm seeing an issue at this point in the tutorial:

function Note({ note }: any) {
  const { id, title, content, created } = note || {};

  return (
    **<Link href={`/notes/${id}`}>**
      <div className={styles.note}>
        <h2>{title}</h2>
        <h5>{content}</h5>
        <p>{created}</p>
      </div>
    </Link>
  );
}

When I change it to "/" or "/notes" it works fine, but when I try to do this I get the following error:

PREFETCH ERROR Error: Functions cannot be passed directly to Client Components because they're not serializable.

Does anyone know how to handle this error? I have been researching this for the past few hours but no luck so far.. thanks.

The folloing
error.tsx and loading.tsx fails and gives the following error

Unhandled Runtime Error
1 of 1
Error: Functions cannot be passed directly to Client Components because they're not serializable.
<... parallelRouterKey=... segmentPath=... error={function} errorStyles=... loading=... loadingStyles=... hasLoading=... template=... templateStyles=... notFound=... notFoundStyles=... childProp=... rootLayoutIncluded=...>
^^^^^^^^^^