Next.js Discord

2024-01-01T18:40:28.000Z

i found the approach of saving all routes to the app folder usefull when you start using nested or paralel routes

@goodsie You can also refer to this: https://nextjs.org/docs/pages/building-your-application/configuring/src-directory

2024-01-01T18:40:53.000Z

You can also refer to this:
https://nextjs.org/docs/pages/building-your-application/configuring/src-directory

2024-01-01T18:41:32.000Z

Thats for the pages router

2024-01-01T18:41:39.000Z

either or

check the content

src Directory

As an alternative to having the special Next.js app or pages directories in the root of your project, Next.js also supports the common pattern of placing application code under the src directory.

This separates application code from project configuration files which mostly live in the root of a project, which is preferred by some individuals and teams.

To use the src directory, move the app Router folder or pages Router folder to src/app or src/pages respectively.

@vr1 i found the approach of saving all routes to the app folder usefull when you start using nested or paralel routes

2024-01-01T18:42:55.000Z

oh true, too many times switching to app routers docs sorry

@goodsie src Directory As an alternative to having the special Next.js app or pages directories in the root of your project, Next.js also supports the common pattern of placing application code under the src directory. This separates application code from project configuration files which mostly live in the root of a project, which is preferred by some individuals and teams. To use the src directory, move the app Router folder or pages Router folder to src/app or src/pages respectively.

2024-01-01T19:12:08.000Z

Meaning you keep the content like components, assets, etc outside of the /app folder?

@Lord_TCG#9068 Yeah I know it's an alternative, I was more looking for people's opinions on what they do ðŸ™‚

2024-01-01T19:16:49.000Z

Yeah I know it's an alternative, I was more looking for people's opinions on what they do ðŸ™‚

https://www.reddit.com/r/nextjs/comments/14fd1kl/do_you_use_src_folder_when_you_use_app_router/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

2024-01-01T19:24:31.000Z

Answer

@goodsie https://www.reddit.com/r/nextjs/comments/14fd1kl/do_you_use_src_folder_when_you_use_app_router/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

2024-01-01T19:24:46.000Z

2024-01-01T19:27:48.000Z

Noicee, thanks. 60/40 split near enough.

Do you use it?

@goodsie and no. i use: root/pages <-- routes and api /root/components /root/messyness

2024-01-01T19:29:18.000Z

and no.
i use:
root/pages <-- routes and api
/root/components
/root/messyness

2024-01-01T19:34:10.000Z

Pages meaning the pages router?

@Lord_TCG#9068 Meaning you keep the content like components, assets, etc outside of the `/app` folder?

2024-01-01T19:34:40.000Z

well yes and no. yes I use pages router but thats indicating my web content

@vr1 Yes, I generate components and save them under a folder inside /src then I can call them by @/components/ui/button for example

2024-01-01T22:19:31.000Z

Yes, I generate components and save them under a folder inside /src then I can call them by @/components/ui/button for example

2024-01-01T22:24:35.000Z

Oh nice, that's what I was leaning towards doing ðŸ™‚

I was about to make a new post on import aliases, but given your reply maybe you know. I was using the localFonts as a tester:

I setup the path in jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/fonts/*": ["src/fonts/*"]
    }
  }
}

and went to use them in the layout.js

import localFont from "next/font/local";
import "./globals.css";

const mediaSans = localFont({
  src: [
    {
      path: "@/fonts/mediaSans/mediasans-regular.otf",
    },
    {
      path: "@/fonts/mediaSans/mediasansextended-regular.otf",
    },
    {
      path: "@/fonts/mediaSans/mediasanssemicondensed-regular.otf",
    },
  ],
});

const sfPro = localFont({
  src: [
    {
      path: "@/fonts/sfPro/SF-Pro-Display-Regular.otf",
    },
    {
      path: "@/fonts/sfPro/SF-Pro-Text-Regular.otf",
    },
  ],
});

export const metadata = {
  title: "Page Title Here",
  description: "Page description here",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

but I get errors:

 â¨¯ src\app\layout.js
Module not found: Can't resolve './@/fonts/mediaSans/mediasans-regular.otf'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next/font/local/target.css?{"path":"src\\app\\layout.js","import":"","arguments":[{"src":[{"path":"@/fonts/mediaSans/mediasans-regular.otf"},{"path":"@/fonts/mediaSans/mediasansextended-regular.otf"},{"path":"@/fonts/mediaSans/mediasanssemicondensed-regular.otf"}]}],"variableName":"mediaSans"}

any ideas??

@goodsie I've not seen the @ as a path identifier yet, but I dont know everything

2024-01-01T22:30:14.000Z

I've not seen the @ as a path identifier yet, but I dont know everything

2024-01-01T22:31:13.000Z

Perhaps it's only useable as an import alias, I'll try a more mainstream example ðŸ¤”

2024-01-01T22:32:37.000Z

theres likely a parse expectation of @ for the above examples