Some questions about new versions (eslint, types and more)
Answered
Spectacled bear posted this in #help-forum
Spectacled bearOP
Hey all!,
I have some questions, if someone can help me to understand and learn a little bit more:
1. why the new versions of Next.js (including learn, cli create-next-app, documentations, etc.) tend to use functions and classes, and it seems that the arrow function is discarded (or at least left in the background)? I know that it is easy to make the change yourself and that this is very much up to each developer's taste, but I have the doubt if it is on purpose and there is something new that I have not found out about.
2. Using Typescript, what is the correct typing for layout files.
3. What is the recommended eslint configuration for a next.js ^14 project with app router?
Thanks in advance.
I have some questions, if someone can help me to understand and learn a little bit more:
1. why the new versions of Next.js (including learn, cli create-next-app, documentations, etc.) tend to use functions and classes, and it seems that the arrow function is discarded (or at least left in the background)? I know that it is easy to make the change yourself and that this is very much up to each developer's taste, but I have the doubt if it is on purpose and there is something new that I have not found out about.
2. Using Typescript, what is the correct typing for layout files.
3. What is the recommended eslint configuration for a next.js ^14 project with app router?
Thanks in advance.
Answered by joulev
1. No, it’s purely a matter of code style
2. Props is { children: React.ReactNode }, if you have upper dynamic segments then [you have the params prop as well that you need to type manually](https://nextjs.org/docs/app/api-reference/file-conventions/layout#params-optional). Personal plug: I wrote [nextjs-route-types](https://www.npmjs.com/package/nextjs-route-types), you can use that to get PageProps and LayoutProps and so on
3. Depending on how strict you want it to be. If you want to be very very strict, check [vercel/style-guide](https://github.com/vercel/style-guide)
2. Props is { children: React.ReactNode }, if you have upper dynamic segments then [you have the params prop as well that you need to type manually](https://nextjs.org/docs/app/api-reference/file-conventions/layout#params-optional). Personal plug: I wrote [nextjs-route-types](https://www.npmjs.com/package/nextjs-route-types), you can use that to get PageProps and LayoutProps and so on
3. Depending on how strict you want it to be. If you want to be very very strict, check [vercel/style-guide](https://github.com/vercel/style-guide)
4 Replies
@Spectacled bear Hey all!,
I have some questions, if someone can help me to understand and learn a little bit more:
1. why the new versions of Next.js (including learn, cli create-next-app, documentations, etc.) tend to use functions and classes, and it seems that the arrow function is discarded (or at least left in the background)? I know that it is easy to make the change yourself and that this is very much up to each developer's taste, but I have the doubt if it is on purpose and there is something new that I have not found out about.
2. Using Typescript, what is the correct typing for layout files.
3. What is the recommended eslint configuration for a next.js ^14 project with app router?
Thanks in advance.
1. No, it’s purely a matter of code style
2. Props is { children: React.ReactNode }, if you have upper dynamic segments then [you have the params prop as well that you need to type manually](https://nextjs.org/docs/app/api-reference/file-conventions/layout#params-optional). Personal plug: I wrote [nextjs-route-types](https://www.npmjs.com/package/nextjs-route-types), you can use that to get PageProps and LayoutProps and so on
3. Depending on how strict you want it to be. If you want to be very very strict, check [vercel/style-guide](https://github.com/vercel/style-guide)
2. Props is { children: React.ReactNode }, if you have upper dynamic segments then [you have the params prop as well that you need to type manually](https://nextjs.org/docs/app/api-reference/file-conventions/layout#params-optional). Personal plug: I wrote [nextjs-route-types](https://www.npmjs.com/package/nextjs-route-types), you can use that to get PageProps and LayoutProps and so on
3. Depending on how strict you want it to be. If you want to be very very strict, check [vercel/style-guide](https://github.com/vercel/style-guide)
Answer
I think they just want to be as accessible as possible. Arrow function are definetly still used. especially when you deal with wrapping function to modify the behavior of the function (like caching) or function middleware (for auths)