fireship-io / next13-pocketbase-demo Goto Github PK
View Code? Open in Web Editor NEWDemo for the new Next.js 13 features with Pocketbase.
Demo for the new Next.js 13 features with Pocketbase.
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.
Link to Pocketbase DL in your README is incorrect. https://github.com/fireship-io/next13-pocketbase-demo/blob/main/pocketbase.io
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 - [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
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.
Is there anybody out there who has solved the authentication and route protection problems, and actually share an example code?
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=...>
^^^^^^^^^^
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.