teawdaw | Next.js | Page 1

floral crest Dec 22, 2024, 1:20 PM

#

why in prodction in some cases in console get error 404 not found in _static build folder but fine in other browsers or in dev

low oasisBOT Dec 22, 2024, 1:20 PM

#

Hi @floral crest. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the knowledge sources, there are a few potential reasons why you might be seeing 404 errors for static assets in production but not in development or other browsers:

Standalone mode configuration: If you're using Next.js with output: 'standalone', the static files may not be copied correctly to the production build. As mentioned in this Github issue comment (https://github.com/vercel/next.js/issues/49283#issuecomment-1883541258), you may need to manually copy the static files to the correct location in the standalone build.
Server configuration: If you're using a custom server setup (like Apache with Nginx), there might be issues with how the static files are being served. As noted in this Github issue (https://github.com/vercel/next.js/issues/58895), Apache rewrite rules might need to be adjusted to properly handle encoded characters in file paths.
CDN or caching issues: If you're using a CDN or have caching enabled, it's possible that some browsers are receiving cached versions of the files while others are not.
Build process: There might be an issue with how the static files are being generated or included in the production build.

To troubleshoot this issue, you could try:

Verifying that all static files are correctly copied to the production build directory.
Checking your server configuration to ensure it's correctly set up to serve static files from Next.js.
Clearing your browser cache and CDN cache (if applicable) to rule out caching issues.
Reviewing your build process to ensure all necessary files are being included.

#

If the problem persists, you may need to provide more specific details about your setup and deployment process to identify the exact cause of the 404 errors.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 22, 2024, 1:56 PM

#

@low oasis clearing my cache and hard refresh solved the problem. it appears cus it reads old javascript is cached whci hahs been deleted in new update. is there better way to handle this other than revalidate force dynamic

low oasisBOT Dec 22, 2024, 1:56 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

I'm glad to hear that clearing your cache and performing a hard refresh solved the problem. This issue is indeed related to caching, and there are better ways to handle it in Next.js without resorting to revalidate or force-dynamic. Let me explain some options:

Time-based revalidation:
Instead of using force-dynamic, you can use time-based revalidation for your static assets. This allows you to set a specific time interval after which the cache will be invalidated. You can do this using the next.revalidate option in your fetch requests or by setting the revalidate option in your page or layout files.

Next.js Docs: Incremental Static Regeneration (ISR) (https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration#time-based-revalidation) provides an example:
```
export const revalidate = 3600 // revalidate every hour
```
On-demand revalidation:
If you need more precise control over when to invalidate the cache, you can use on-demand revalidation. This allows you to trigger a revalidation programmatically, for example, when you update content in your CMS.

Next.js Docs: On-demand Revalidation (https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) shows how to use revalidatePath or revalidateTag:
```
'use server'

import { revalidatePath } from 'next/cache'

export async function updatePost() {
  // Update the post
  revalidatePath('/blog')
}
```
Cache-Control headers:
You can also set appropriate Cache-Control headers for your static assets. Next.js allows you to customize these headers using the next.config.js file.

#

Next.js Docs: expireTime (https://nextjs.org/docs/app/api-reference/next-config-js/expireTime) shows how to set a custom stale-while-revalidate expire time:

module.exports = {
  expireTime: 3600, // one hour in seconds
}

Use unique file names:
When you update your JavaScript files, consider using a unique file name or appending a version number to the file name. This way, when you deploy a new version, clients will automatically fetch the new file instead of using the cached version.

These approaches provide more controlled and efficient ways to manage caching and ensure that your users always get the most up-to-date version of your static assets without resorting to `force-dynamic`, which can negatively impact performance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 22, 2024, 1:58 PM

#

@floral crest how to use unique file names in nextjs typescript example?

#

@low oasis how to use unique file names in nextjs typescript example?

low oasisBOT Dec 22, 2024, 1:58 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

To use unique file names for your static assets in Next.js with TypeScript, you can leverage the generateBuildId function in your next.config.js file. This function allows you to generate a unique identifier for each build, which can then be used to create unique file names for your assets. Here's an example of how you can implement this:

First, update your next.config.js file to include the generateBuildId function:

/** @type {import('next').NextConfig} */
const nextConfig = {
  generateBuildId: async () => {
    // This could be anything, using the latest git hash
    return process.env.GIT_HASH
  },
}

module.exports = nextConfig

This example is taken from the Next.js documentation on generateBuildId (https://nextjs.org/docs/app/api-reference/next-config-js/generateBuildId).

In your TypeScript files, you can then use this build ID to create unique file names for your assets. For example:

import { useEffect, useState } from 'react'

const MyComponent = () => {
  const [buildId, setBuildId] = useState('')

  useEffect(() => {
    // Fetch the build ID
    const getBuildId = async () => {
      const res = await fetch('/_next/static/BUILD_ID')
      const id = await res.text()
      setBuildId(id)
    }
    getBuildId()
  }, [])

  return (
    <div>
      <img src={`/images/my-image-${buildId}.jpg`} alt="My Image" />
      <script src={`/js/my-script-${buildId}.js`}></script>
    </div>
  )
}

export default MyComponent

In this example, we're fetching the build ID at runtime and using it to create unique file names for an image and a script.

Remember to actually create these uniquely named files during your build process. You might need to set up a custom build script that renames your assets using the build ID.

#

This approach ensures that each time you deploy a new version of your app, the file names will be unique, preventing caching issues with updated assets.

Next.js Documentation: generateBuildId (https://nextjs.org/docs/app/api-reference/next-config-js/generateBuildId)

Keep in mind that this is a basic example and you might need to adjust it based on your specific project structure and requirements.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 22, 2024, 3:10 PM

#

@low oasis is it possible to put not-found.tsx in fx (landing) route instead of the app folder directly.

low oasisBOT Dec 22, 2024, 3:10 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Based on the knowledge sources provided, it is possible to place a not-found.tsx file in a route group like (landing) instead of directly in the app folder. However, there are some important considerations and limitations to be aware of:

Route Groups: Next.js supports creating route groups by wrapping a folder in parentheses, like (landing). This is useful for organizing routes without affecting the URL structure. As mentioned in the Next.js documentation on organizing your project (https://nextjs.org/docs/app/getting-started/project-structure#organizing-your-project), route groups can be used for "Organizing routes into groups e.g. by site section, intent, or team."
Not-found Behavior: According to the Github issue about global not-found in multiple root layouts (https://github.com/vercel/next.js/issues/55191), there are some limitations with how not-found.tsx works in nested structures. The issue suggests that Next.js only recognizes the 404 page in the root directory and may not recognize it in dynamic directories.
Workaround: A workaround mentioned in the same Github issue is to use a dynamic catch-all route. You could create a [...not-found] folder inside your (landing) group and add a page.tsx file there. This approach can catch not-found errors after the (landing) route segment.

Here's an example structure that might work:

app/
  (landing)/
    [...not-found]/
      page.tsx
    layout.tsx
    page.tsx

In the [...not-found]/page.tsx, you could use the notFound() function from Next.js:

import { notFound } from 'next/navigation'

export default function NotFoundCatchAll() {
  notFound()
}

However, it's important to note that this solution may not work perfectly in all scenarios, especially with static exports or multiple root layouts.

#

For the most reliable behavior, it's still recommended to place the not-found.tsx file directly in the app folder as suggested in the Next.js documentation on file conventions (https://nextjs.org/docs/app/building-your-application/routing#file-conventions).

If you need specific not-found behavior for the (landing) group, you might need to handle it programmatically within the pages or layout of that group.

Remember that the behavior of `not-found.tsx` in nested structures is still an area of ongoing development in Next.js, and future updates may provide better support for this use case.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 22, 2024, 5:25 PM

#

import type { InferGetStaticPropsType, GetStaticProps } from 'next'
import { db, schema } from '@/server/drizzle'
import { eq } from 'drizzle-orm'

type ArticleProps = {
title: string
content: string
}

const ArticlePage: React.FC<ArticleProps> = ({ title, content }) => {
return (
<div>
<h1>{title}</h1>
<div dangerouslySetInnerHTML={{ __html: content }} />
</div>
)
}

export const getStaticProps = (async (context) => {
const { slug } = context.params as { slug: string }

const [article] = await db.select().from(schema.articles).where(eq(schema.articles.slug, slug))

if (!article) {
return { notFound: true }
}

return { props: { title: article.title, content: article.content } }
}) satisfies GetStaticProps<ArticleProps>

export default ArticlePage

@low oasis × "getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

Building Your Application: Data Fetching | Next.js

Learn how to fetch, cache, revalidate, and mutate data with Next.js.

low oasisBOT Dec 22, 2024, 5:25 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

The error you're encountering is because you're trying to use getStaticProps in the App Router (app/ directory), which is not supported. The App Router uses a different approach for data fetching. Let me explain how you can migrate this code to work with the App Router:

First, remove the getStaticProps function and the InferGetStaticPropsType import.
Instead of using getStaticProps, you can fetch data directly in your page component, which will be a Server Component by default in the App Router.
To handle dynamic routes, you'll need to implement the generateStaticParams function.

Here's how you can rewrite your code to work with the App Router:

import { db, schema } from '@/server/drizzle'
import { eq } from 'drizzle-orm'
import { notFound } from 'next/navigation'

type Params = {
  slug: string
}

export async function generateStaticParams() {
  const articles = await db.select({ slug: schema.articles.slug }).from(schema.articles)
  return articles.map((article) => ({
    slug: article.slug,
  }))
}

async function getArticle(slug: string) {
  const [article] = await db.select().from(schema.articles).where(eq(schema.articles.slug, slug))
  if (!article) notFound()
  return article
}

export default async function ArticlePage({ params }: { params: Params }) {
  const article = await getArticle(params.slug)

  return (
    <div>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: article.content }} />
    </div>
  )
}

This approach uses the new data fetching method in the App Router, as described in the Next.js documentation on migrating from getStaticProps (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#static-site-generation-getstaticprops).

Key points:

#

The page component is now an async function, allowing you to fetch data directly.
generateStaticParams is used instead of getStaticPaths to generate the static paths at build time.
We use the notFound function from next/navigation to handle cases where the article is not found.
The component receives params as a prop, which includes the slug.

Remember to place this file in the appropriate location in your app directory, such as app/articles/[slug]/page.tsx.

This approach provides a more integrated way of handling static generation and server-side rendering in Next.js 13 and later versions using the App Router.

Next.js Docs: Migrating from `getStaticProps` (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#static-site-generation-getstaticprops)
Next.js Docs: generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 22, 2024, 5:29 PM

#

@low oasis can i also make my navigation sidebar fetch the articles avaialble

low oasisBOT Dec 22, 2024, 5:29 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Yes, you can certainly make your navigation sidebar fetch the available articles. This can be done using a Server Component in Next.js App Router. Here's how you can implement this:

Create a new Server Component for your sidebar, let's call it Sidebar.tsx:

import { db, schema } from '@/server/drizzle'

async function getArticles() {
  return await db.select({ 
    slug: schema.articles.slug, 
    title: schema.articles.title 
  }).from(schema.articles)
}

export default async function Sidebar() {
  const articles = await getArticles()

  return (
    <nav>
      <ul>
        {articles.map((article) => (
          <li key={article.slug}>
            <a href={`/articles/${article.slug}`}>{article.title}</a>
          </li>
        ))}
      </ul>
    </nav>
  )
}

Use this Sidebar component in your layout file. If you have a layout file for your articles, it might look something like this:

import Sidebar from './Sidebar'

export default function ArticlesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main>{children}</main>
    </div>
  )
}

This approach allows you to fetch the articles directly in the Sidebar component, which is a Server Component. The data will be fetched on the server and sent to the client as part of the initial HTML, providing good performance and SEO benefits.

Remember that this Sidebar component will be static by default. If you need to update the sidebar content frequently, you might want to consider adding a revalidation strategy or using client-side fetching for more dynamic content.

For example, to add revalidation, you could modify your getArticles function like this:

#

async function getArticles() {
  const articles = await db.select({ 
    slug: schema.articles.slug, 
    title: schema.articles.title 
  }).from(schema.articles)

  return articles
}

export const revalidate = 3600 // revalidate every hour

This approach is based on the data fetching methods described in the Next.js documentation on data fetching (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#examples).

By implementing the sidebar this way, you're leveraging the power of Server Components to efficiently fetch and render your article list, providing a smooth and performant user experience.

Next.js Docs: Data Fetching (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#examples)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 22, 2024, 11:37 PM

#

@low oasis i have /docs/[[...slug]]/page.tsx but it says not found when i go to /docs/example

low oasisBOT Dec 22, 2024, 11:37 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Based on the information provided in the knowledge sources, it seems you're encountering an issue with your optional catch-all route /docs/[[...slug]]/page.tsx. Let's analyze the problem and provide a solution:

Optional Catch-all Segments:
The **[...slug]] syntax you're using is correct for an optional catch-all segment. As described in the [Next.js documentation on Optional Catch-all Segments** (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments), this should match /docs, /docs/example, and any deeper paths.
Possible Causes:
There are a few reasons why you might be seeing a "not found" error:

a. Missing generateStaticParams:
If you're using static site generation, you need to define which paths should be pre-rendered. You might need to add a generateStaticParams function to your page.

b. Server-side handling:
If you're using server-side rendering, make sure you're correctly handling the params in your page component.

Solution:
Here's an example of how you can structure your /docs/[[...slug]]/page.tsx file to handle both the root /docs path and nested paths like /docs/example:

import { notFound } from 'next/navigation'

export async function generateStaticParams() {
  // Define the paths you want to pre-render
  return [
    { slug: [] },
    { slug: ['example'] },
    // Add more paths as needed
  ]
}

export default function DocsPage({ params }: { params: { slug?: string[] } }) {
  // Handle the root /docs path
  if (!params.slug) {
    return <h1>Docs Home Page</h1>
  }

#

// Handle nested paths
const slug = params.slug.join('/')

 // Here you would typically fetch the content for the given slug
 // For this example, we'll just check if it's 'example'
 if (slug === 'example') {
   return <h1>Example Doc Page</h1>
 }

 // If the slug doesn't match any known page, return not found
 notFound()

}


4. Additional Considerations:
- Make sure your `next.config.js` file doesn't have any conflicting route configurations.
- If you're using `output: 'export'` for static site generation, ensure all possible paths are included in `generateStaticParams`.

If you're still encountering issues after implementing this solution, it might be helpful to check your Next.js version and ensure it's up to date, as there have been some issues reported with catch-all routes in older versions.

**Next.js Docs: Optional Catch-all Segments** (<https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments>)
**Next.js Docs: generateStaticParams** (<https://nextjs.org/docs/app/api-reference/functions/generate-static-params>)

Remember to adjust the content fetching logic in the example to match your actual data source and requirements.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 22, 2024, 11:39 PM

#

@low oasis does this look right

type Params = {
slug: string[]
}

export async function generateStaticParams() {
const articles = await db.select({ slug: schema.articles.slug }).from(schema.articles)
return articles.map((article) => ({
slug: article.slug,
}))
}

export default async function ArticlePage({ params }: { params: Params }) {
const [slug] = params.slug
const article = await getArticle(slug)

if (!article) {
return <div>not fid</div>
}

const contentWithIds = addIdsToHeadings(article.content)
const items = generateTableOfContents(contentWithIds)

low oasisBOT Dec 22, 2024, 11:39 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Your code is on the right track, but there are a few adjustments needed to make it fully compatible with Next.js App Router and the optional catch-all route you're using. Let's go through the changes:

The Params type is correct for an optional catch-all route.
In generateStaticParams, you need to return an array of objects where each object has a slug property that is an array of strings, not a single string. Here's the corrected version:

export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
  const articles = await db.select({ slug: schema.articles.slug }).from(schema.articles)
  return articles.map((article) => ({
    slug: [article.slug], // Wrap the slug in an array
  }))
}

In your page component, you're correctly destructuring the first element of the slug array. However, for an optional catch-all route, you should handle the case where params.slug might be undefined (for the root /docs path). Also, instead of returning JSX for the not found case, you should use the notFound() function from Next.js. Here's an improved version:

import { notFound } from 'next/navigation'

export default async function ArticlePage({ params }: { params: Params }) {
  // Handle the root /docs path
  if (!params.slug || params.slug.length === 0) {
    // Render your docs home page or redirect
    return <div>Docs Home Page</div>
  }

  const [slug] = params.slug
  const article = await getArticle(slug)

  if (!article) {
    notFound()
  }

  const contentWithIds = addIdsToHeadings(article.content)
  const items = generateTableOfContents(contentWithIds)

  // Render your article page
  return (
    <div>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: contentWithIds }} />
      {/* Render your table of contents using `items` */}
    </div>
  )
}

#

Make sure you have defined the getArticle, addIdsToHeadings, and generateTableOfContents functions elsewhere in your code or import them as needed.

With these changes, your code should work correctly with the optional catch-all route /docs/[[...slug]]. It will handle both the root /docs path and nested paths like /docs/example.

Remember to adjust the content rendering and table of contents generation to fit your specific needs.

Next.js Docs: Optional Catch-all Segments (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments)
Next.js Docs: generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 23, 2024, 3:51 AM

#

@low oasis does it help to put local fonts in public folder or smth for static

low oasisBOT Dec 23, 2024, 3:51 AM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Based on the knowledge sources provided, placing local fonts in the public folder can be beneficial for static assets in Next.js, but there's a more optimized way to handle fonts using the built-in font optimization features. Let me explain:

Using next/font/local:
Next.js provides a next/font/local module that allows you to use local font files with optimized loading. This is the recommended approach for using local fonts in Next.js.

Next.js Docs: Local Fonts (https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts) provides an example:
```
import localFont from 'next/font/local'

const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})
```
In this case, you would typically place your font files in the same directory as your component or in a dedicated fonts directory within your project structure, not necessarily in the public folder.

Multiple font files:
If you have multiple files for a single font family, you can specify them in an array:

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    // ... other variations
  ],
})

Benefits of next/font/local:
Using this approach automatically optimizes your fonts by:
- Hosting font files with other static assets
- Removing external network requests for improved privacy and performance
- Applying best-in-class font rendering defaults
- Eliminating layout shift

#

Public folder usage:
While you can place fonts in the public folder, it's not necessary when using next/font/local. The public folder is more commonly used for static assets that need to be served as-is, like images or favicon.

In conclusion, while putting local fonts in the public folder is possible, it's more beneficial to use the next/font/local module for optimal font loading and performance in Next.js applications. This approach provides better optimization and integration with Next.js's built-in features for static assets.

Next.js Docs: Local Fonts (https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts)
Next.js Docs: Font Optimization (https://nextjs.org/docs/app/building-your-application/optimizing/fonts)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 23, 2024, 3:54 AM

#

@low oasis whats best way to make them avaliable in all the child routes so i can use

low oasisBOT Dec 23, 2024, 3:54 AM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

To make local fonts available in all child routes in Next.js, the best approach is to define and load the fonts in a root layout file. This way, the fonts will be available throughout your application. Here's how you can do it:

First, import and define your local fonts in the root layout file. This file is typically located at app/layout.tsx (or app/layout.js if you're not using TypeScript):

import localFont from 'next/font/local'

const myFont = localFont({
  src: [
    {
      path: './fonts/MyFont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/MyFont-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    // Add more variations as needed
  ],
  variable: '--font-myfont', // This creates a CSS variable
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.variable}>
      <body>{children}</body>
    </html>
  )
}

By adding the myFont.variable to the className of the <html> tag, you're making the font available as a CSS variable throughout your application.
You can then use this font in your global CSS file (e.g., app/globals.css):

body {
  font-family: var(--font-myfont), sans-serif;
}

If you need to use the font in specific components, you can import it from a central location. Create a file, say app/fonts.ts:

import localFont from 'next/font/local'

export const myFont = localFont({
  src: [
    {
      path: './fonts/MyFont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    // ... other variations
  ],
  variable: '--font-myfont',
})

Then, in any component where you need to use the font:

import { myFont } from '@/app/fonts'

#

export default function MyComponent() {
return <div className={myFont.className}>This text uses my custom font</div>
}


This approach ensures that your local fonts are:
- Loaded only once at the root level
- Available throughout your application
- Optimized by Next.js's font optimization features

By defining the fonts in the root layout and using CSS variables, you make them available to all child routes without having to import them in each component or page.

**Next.js Docs: Local Fonts** (<https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts>)
**Next.js Docs: Font Optimization** (<https://nextjs.org/docs/app/building-your-application/optimizing/fonts>)

Remember to adjust the file paths and font names according to your project structure and the actual fonts you're using.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 25, 2024, 2:09 AM

#

@low oasis how to change nextjs app to monorepo but keep everything in one domain but deploy same domain

low oasisBOT Dec 25, 2024, 2:09 AM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

To change your Next.js app to a monorepo structure while keeping everything under one domain and deploying to the same domain, you can use a combination of Next.js Multi Zones and a proxy configuration. Here's a step-by-step guide on how to achieve this:

Set up the monorepo structure:
Create a root directory for your monorepo and organize your projects within it. For example:
```
monorepo/
  apps/
    main-app/
    docs/
    blog/
  packages/
    shared-components/
```

Configure Next.js Multi Zones:
Multi Zones allow you to have multiple Next.js applications under a single domain. In your main app (e.g., apps/main-app), configure the next.config.js file to include rewrites for the other apps:

module.exports = {
  rewrites: async () => {
    return [
      {
        source: '/docs/:path*',
        destination: '<https://docs-app.vercel.app/:path*',>
      },
      {
        source: '/blog/:path*',
        destination: '<https://blog-app.vercel.app/:path*',>
      },
    ]
  },
}

This configuration assumes you'll deploy each app separately and then use rewrites to combine them under one domain.

Deploy individual apps:
Deploy each app in your monorepo to Vercel or your preferred hosting platform. Each app will get its own URL (e.g., main-app.vercel.app, docs-app.vercel.app, blog-app.vercel.app).
Set up a proxy project:
Create a new project with a vercel.json file that will act as a proxy for all your apps. This project will be responsible for routing requests to the appropriate app:

#

   {
     "rewrites": [
       { "source": "/docs/(.*)", "destination": "<https://docs-app.vercel.app/$1"> },
       { "source": "/blog/(.*)", "destination": "<https://blog-app.vercel.app/$1"> },
       { "source": "/(.*)", "destination": "<https://main-app.vercel.app/$1"> }
     ]
   }

Deploy the proxy project:
Deploy this proxy project to Vercel and assign your custom domain to it. This will be the main entry point for your entire application.

By following these steps, you'll have a monorepo structure with multiple Next.js apps, all served under a single domain. The proxy project handles routing requests to the appropriate app based on the URL path.

Remember to adjust your build and deployment scripts to handle the monorepo structure. You might want to use tools like Turborepo or Nx to manage your monorepo more effectively.

Vercel Docs: How can I serve multiple projects under a single domain? (https://vercel.com/guides/how-can-i-serve-multiple-projects-under-a-single-domain#with-a-proxy-project)
Next.js Docs: Multi Zones (https://nextjs.org/docs/app/building-your-application/deploying/multi-zones#sharing-code)

This approach allows you to maintain separate codebases for different parts of your application while presenting them as a unified experience to your users.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 25, 2024, 2:12 AM

#

@low oasis what if i just want same domain the apps just lead to diff paths

low oasisBOT Dec 25, 2024, 2:12 AM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

If you want to keep all your apps on the same domain and just have them lead to different paths, you can simplify the approach using Next.js Multi Zones without the need for a separate proxy project. Here's how you can achieve this:

Monorepo Structure:
Keep your monorepo structure as before:

monorepo/
  apps/
    main-app/
    docs/
    blog/
  packages/
    shared-components/

Configure Next.js Multi Zones:
In each app, you'll need to configure the next.config.js file to use a basePath and assetPrefix. This ensures that each app's assets are properly scoped to its path.

For the main app (apps/main-app/next.config.js):
```
module.exports = {
  // No basePath for the main app
}
```
For the docs app (apps/docs/next.config.js):
```
module.exports = {
  basePath: '/docs',
  assetPrefix: '/docs',
}
```
For the blog app (apps/blog/next.config.js):
```
module.exports = {
  basePath: '/blog',
  assetPrefix: '/blog',
}
```

Rewrite Configuration:
In your main app's next.config.js, add rewrites to route requests to the appropriate app:

module.exports = {
  rewrites: async () => {
    return [
      {
        source: '/docs/:path*',
        destination: '/docs/:path*',
      },
      {
        source: '/blog/:path*',
        destination: '/blog/:path*',
      },
    ]
  },
}

Deployment:
Deploy all your apps to the same Vercel project. When you push your changes, Vercel will recognize the monorepo structure and deploy all the apps together.

#

Domain Configuration:
In your Vercel project settings, assign your custom domain to the main app. The other apps will be accessible through their respective paths (e.g., yourdomain.com/docs, yourdomain.com/blog).

This approach allows you to:

Keep all your apps under the same domain
Maintain separate codebases for different parts of your application
Avoid the need for a separate proxy project

Remember to adjust your internal links to use the correct paths. For example, in your main app, you would link to the docs like this:

<Link href="/docs">Documentation</Link>

Next.js Docs: Multi Zones (https://nextjs.org/docs/app/building-your-application/deploying/multi-zones)
Next.js Docs: basePath (https://nextjs.org/docs/app/api-reference/next-config-js/basePath)

This setup provides a clean way to organize your monorepo while serving all apps from the same domain with different paths.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 25, 2024, 2:16 AM

#

@low oasis and what if i want the api to be its own project

low oasisBOT Dec 25, 2024, 2:16 AM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

If you want to have the API as its own project within your monorepo structure, you can certainly do that. This approach allows you to separate your API logic from your frontend applications while still maintaining everything under the same domain. Here's how you can set this up:

Update your monorepo structure:

monorepo/
  apps/
    main-app/
    docs/
    blog/
    api/
  packages/
    shared-components/

Set up the API project:
In the apps/api directory, you can create a new Next.js project that will serve as your API. You can use Next.js API routes or even set up an Express.js server within this project.
Configure the API project:
In the apps/api/next.config.js file, add the following configuration:

module.exports = {
  basePath: '/api',
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: '/:path*',
      },
    ]
  },
}

This configuration ensures that all requests to /api are handled by this project.

Update the main app configuration:
In your main app's next.config.js, add a rewrite rule for the API:

module.exports = {
  rewrites: async () => {
    return [
      {
        source: '/docs/:path*',
        destination: '/docs/:path*',
      },
      {
        source: '/blog/:path*',
        destination: '/blog/:path*',
      },
      {
        source: '/api/:path*',
        destination: '/api/:path*',
      },
    ]
  },
}

API Routes:
In your API project, you can now create API routes as you normally would in Next.js, but without the /api prefix. For example:

// apps/api/pages/users.js
export default function handler(req, res) {
  res.status(200).json({ users: ['John Doe', 'Jane Doe'] })
}

This route would be accessible at yourdomain.com/api/users.

#

Deployment:
Deploy all your apps, including the API, to the same Vercel project. Vercel will recognize the monorepo structure and deploy all the apps together.

This setup allows you to:

Have a separate project for your API
Keep all your apps and API under the same domain
Maintain a clean separation of concerns between frontend and backend

Remember to update your frontend applications to use the correct API endpoints. For example:

const response = await fetch('/api/users')

Next.js Docs: API Routes (https://nextjs.org/docs/app/building-your-application/routing/api-routes)
Next.js Docs: Rewrites (https://nextjs.org/docs/app/api-reference/next-config-js/rewrites)

By structuring your monorepo this way, you gain the flexibility of having a dedicated API project while still maintaining a unified domain for your entire application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 27, 2024, 2:12 PM

#

@low oasis how put api routes in custom folder fx /api in root instead of /app

low oasisBOT Dec 27, 2024, 2:12 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Based on the information provided in the knowledge sources and our previous conversation, there isn't a direct way to put API routes in a custom folder like /api in the root instead of /app when using the Next.js App Router. However, I can suggest a workaround that achieves a similar result:

Create an API folder in your app directory:
Instead of placing your API routes directly in the root, you can create an api folder inside your app directory. Your structure would look like this:
```
app/
  api/
    route.ts (or route.js)
```

Use catch-all routing:
In your app/api/route.ts file, you can use a catch-all route to handle all API requests:

import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  const { pathname } = request.nextUrl
  // Handle GET requests
  // Use pathname to determine which API endpoint was called
}

export async function POST(request: NextRequest) {
  const { pathname } = request.nextUrl
  // Handle POST requests
  // Use pathname to determine which API endpoint was called
}

// Add other HTTP methods as needed

Implement your API logic:
Within these handler functions, you can implement the logic for your various API endpoints based on the pathname.
Organize your API code:
You can still organize your API code in separate files within the app/api directory, and import the necessary functions into your route.ts file.

This approach allows you to:

Keep all your API routes under the /api path
Organize your API code in a dedicated folder
Maintain compatibility with the Next.js App Router structure

#

Remember that this method requires you to handle routing logic within your API handlers, which might be less convenient than having separate files for each route. However, it provides a way to centralize your API code in a custom location while still adhering to the App Router structure.

If you need more granular control over API routes and prefer the Pages Router approach, you might consider using a hybrid approach where you keep your pages in the app directory but use the pages/api directory for your API routes. However, this is not the recommended approach for new projects using the App Router.

Next.js Docs: Route Handlers (https://nextjs.org/docs/app/building-your-application/routing/route-handlers)

Always consider the trade-offs between customization and adherence to Next.js conventions when structuring your project.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 27, 2024, 2:16 PM

#

@low oasis is rewrites() can be used to make a api folder in root

low oasisBOT Dec 27, 2024, 2:16 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Yes, you can use the rewrites() function in your next.config.js file to create a virtual API folder in the root of your Next.js project. This approach allows you to keep your API routes in a custom location while still accessing them through the /api path. Here's how you can implement this:

First, create an API folder in your project root (not in the app or pages directory):

your-project/
  api/
    users.js
    posts.js
  app/
    // your app routes
  next.config.js

In your next.config.js file, add the following configuration:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: '/api/:path*',
      },
    ]
  },
}

This rewrite rule tells Next.js to handle any requests to /api/* paths.

In your API files (e.g., api/users.js), you can export your API handlers:

export default function handler(req, res) {
  res.status(200).json({ users: ['John Doe', 'Jane Doe'] })
}

To make Next.js recognize these files as API routes, you need to add a small server file. Create a file named server.js in your project root:

const next = require('next')
const express = require('express')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  // Handle API routes
  server.use('/api', (req, res) => {
    const path = req.path.replace(/^\/api/, '')
    require(`./api${path}`).default(req, res)
  })

  // Let Next.js handle everything else
  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on <http://localhost:3000'>)
  })
})

Update your package.json scripts to use this custom server:

#

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

This setup allows you to:

Keep your API routes in a custom /api folder in the root of your project
Access these API routes through the /api path in your application
Maintain compatibility with Next.js routing and server-side rendering

Remember that this approach introduces a custom server, which may have implications for serverless deployments. If you're deploying to platforms like Vercel, you might need to adjust your deployment configuration.

Next.js Docs: Rewrites (https://nextjs.org/docs/app/api-reference/next-config-js/rewrites)

This solution provides a way to organize your API routes in a custom folder while still leveraging Next.js features and maintaining the expected `/api` path structure.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@floral crest Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral crest Dec 27, 2024, 2:17 PM

#

@low oasis how i ntypescript

low oasisBOT Dec 27, 2024, 2:17 PM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

To implement the custom API folder setup in TypeScript for a Next.js project, you'll need to make a few adjustments to the JavaScript version. Here's how you can do it:

First, create your API folder in the project root as before:

your-project/
  api/
    users.ts
    posts.ts
  app/
    // your app routes
  next.config.js
  server.ts

In your next.config.js, keep the rewrites configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: '/api/:path*',
      },
    ];
  },
};

module.exports = nextConfig;

Create your API handlers in TypeScript. For example, in api/users.ts:

import type { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  users: string[];
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ users: ['John Doe', 'Jane Doe'] });
}

Create a server.ts file in your project root:

import next from 'next';
import express from 'express';
import { NextApiRequest, NextApiResponse } from 'next';

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // Handle API routes
  server.use('/api', (req: NextApiRequest, res: NextApiResponse) => {
    const path = req.path.replace(/^\/api/, '');
    import(`./api${path}`).then((module) => {
      module.default(req, res);
    }).catch((error) => {
      console.error('Error importing API route:', error);
      res.status(500).json({ error: 'Internal Server Error' });
    });
  });

#

// Let Next.js handle everything else
server.all('*', (req: NextApiRequest, res: NextApiResponse) => {
return handle(req, res);
});

server.listen(3000, (err?: Error) => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
});


5. Update your `package.json` scripts:

```json
"scripts": {
  "dev": "ts-node --project tsconfig.server.json server.ts",
  "build": "next build",
  "start": "NODE_ENV=production ts-node --project tsconfig.server.json server.ts"
}

Create a tsconfig.server.json file in your project root:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "noEmit": false
  },
  "include": ["server.ts"]
}

Make sure your main tsconfig.json includes the necessary configurations:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Install necessary dependencies:

npm install --save-dev typescript @types/react @types/node @types/express ts-node

This setup allows you to use TypeScript for your custom API routes while maintaining them in a separate /api folder in your project root. The server.ts file handles the routing to these custom API files, and the rewrites() function in next.config.js ensures that requests to /api/* are properly handled.

#

Remember that this approach uses a custom server, which may have implications for serverless deployments. If you're deploying to platforms like Vercel, you might need to adjust your deployment configuration.

Next.js Docs: TypeScript (https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
Next.js Docs: Custom Server (https://nextjs.org/docs/pages/building-your-application/configuring/custom-server)

#teawdaw

If the problem persists, you may need to provide more specific details about your setup and deployment process to identify the exact cause of the 404 errors.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

These approaches provide more controlled and efficient ways to manage caching and ensure that your users always get the most up-to-date version of your static assets without resorting to `force-dynamic`, which can negatively impact performance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Keep in mind that this is a basic example and you might need to adjust it based on your specific project structure and requirements.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Remember that the behavior of `not-found.tsx` in nested structures is still an area of ongoing development in Next.js, and future updates may provide better support for this use case.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Next.js Docs: Migrating from `getStaticProps` (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#static-site-generation-getstaticprops)
Next.js Docs: generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Next.js Docs: Data Fetching (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#examples)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Next.js Docs: Optional Catch-all Segments (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments)
Next.js Docs: generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Next.js Docs: Local Fonts (https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts)
Next.js Docs: Font Optimization (https://nextjs.org/docs/app/building-your-application/optimizing/fonts)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This approach allows you to maintain separate codebases for different parts of your application while presenting them as a unified experience to your users.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This setup provides a clean way to organize your monorepo while serving all apps from the same domain with different paths.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

By structuring your monorepo this way, you gain the flexibility of having a dedicated API project while still maintaining a unified domain for your entire application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Always consider the trade-offs between customization and adherence to Next.js conventions when structuring your project.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This solution provides a way to organize your API routes in a custom folder while still leveraging Next.js features and maintaining the expected `/api` path structure.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This TypeScript implementation provides type safety and better developer experience while allowing you to organize your API routes in a custom folder.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#teawdaw

If the problem persists, you may need to provide more specific details about your setup and deployment process to identify the exact cause of the 404 errors.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

These approaches provide more controlled and efficient ways to manage caching and ensure that your users always get the most up-to-date version of your static assets without resorting to force-dynamic, which can negatively impact performance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Keep in mind that this is a basic example and you might need to adjust it based on your specific project structure and requirements.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Remember that the behavior of not-found.tsx in nested structures is still an area of ongoing development in Next.js, and future updates may provide better support for this use case.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Next.js Docs: Migrating from getStaticProps (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#static-site-generation-getstaticprops) Next.js Docs: generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Next.js Docs: Data Fetching (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#examples)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Next.js Docs: Optional Catch-all Segments (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) Next.js Docs: generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Next.js Docs: Local Fonts (https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts) Next.js Docs: Font Optimization (https://nextjs.org/docs/app/building-your-application/optimizing/fonts)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This approach allows you to maintain separate codebases for different parts of your application while presenting them as a unified experience to your users.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This setup provides a clean way to organize your monorepo while serving all apps from the same domain with different paths.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

By structuring your monorepo this way, you gain the flexibility of having a dedicated API project while still maintaining a unified domain for your entire application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Always consider the trade-offs between customization and adherence to Next.js conventions when structuring your project.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This solution provides a way to organize your API routes in a custom folder while still leveraging Next.js features and maintaining the expected /api path structure.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This TypeScript implementation provides type safety and better developer experience while allowing you to organize your API routes in a custom folder.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

These approaches provide more controlled and efficient ways to manage caching and ensure that your users always get the most up-to-date version of your static assets without resorting to `force-dynamic`, which can negatively impact performance.

Remember that the behavior of `not-found.tsx` in nested structures is still an area of ongoing development in Next.js, and future updates may provide better support for this use case.

Next.js Docs: Migrating from `getStaticProps` (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#static-site-generation-getstaticprops)
Next.js Docs: generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)

Next.js Docs: Optional Catch-all Segments (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments)
Next.js Docs: generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params)

Next.js Docs: Local Fonts (https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts)
Next.js Docs: Font Optimization (https://nextjs.org/docs/app/building-your-application/optimizing/fonts)

This solution provides a way to organize your API routes in a custom folder while still leveraging Next.js features and maintaining the expected `/api` path structure.