Jakov Comments - Answer Overflow

Hey! 👋 For Google Sign-In, you can't get a unique username directly from Google. Here's the deal: Make username optional: In your User database model, allow the username field to be null at first. Also add a googleId field (unique) to link accounts. A isCompletedProfile flag is helpful too. Google Sign-In: Frontend handles the Google login flow. Backend verifies the token from Google (super important!), then gets the user's Google ID (sub) and email. Check Existing: Look for a user in your DB by googleId first. If found, they're logged in! If not, check by email. If found by email, link the accounts (ask the user!). New User: If no user is found, create a new user record in your DB, but without a username yet. Set isCompletedProfile to false. Force Username Choice: After Google Sign-In (or account linking), if isCompletedProfile is false, immediately redirect the user to a "Choose Username" page. They must pick one before using your app. Username Validation: On that page, validate the username (length, characters, uniqueness – check against your DB!). Provide real-time availability feedback if you can (use debouncing!). Update & Finish: Once a valid username is chosen, update the user record in your DB, set isCompletedProfile to true, and redirect them to the main app. They're all set! Basically, you're separating authentication (Google handles that) from profile setup (you handle the username). 👍

5 replies

TTCTheo's Typesafe Cult

•Created by jakeleventhal on 3/21/2025 in #questions

Is it possible to import SVGs from a shared package in next 15?

If you're using TypeScript, add this to global.d.ts:

declare module '*.svg?url' {
  const content: string;
  export default content;
}

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

declare module '*.svg?url' {
  const content: string;
  export default content;
}

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

After making these changes delete your .next folder.

4 replies

TTCTheo's Typesafe Cult

•Created by jakeleventhal on 3/21/2025 in #questions

Is it possible to import SVGs from a shared package in next 15?

Try to tweak your next config Try this:

module.exports = {
  webpack(config) {
    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

    config.module.rules.push({
      test: /\.svg$/i,
      oneOf: [
        {
          issuer: { and: [/\.(js|ts|jsx|tsx|md|mdx)$/] },
          resourceQuery: { not: [/url/] },
          use: ['@svgr/webpack'],
        },
        {
          type: 'asset',
          resourceQuery: /url/,
        },
        {
          use: [fileLoaderRule.loader, ...fileLoaderRule.options ? [{ options: fileLoaderRule.options }] : []].filter(Boolean),
            exclude: [
                /\.(js|ts|jsx|tsx|md|mdx)$/,
                /node_modules\/(?!@something\/shared-ui)/,
            ]
        },
      ],
    });

    fileLoaderRule.exclude = /@something\/shared-ui\/src/;

    return config;
  },
};

module.exports = {
  webpack(config) {
    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

    config.module.rules.push({
      test: /\.svg$/i,
      oneOf: [
        {
          issuer: { and: [/\.(js|ts|jsx|tsx|md|mdx)$/] },
          resourceQuery: { not: [/url/] },
          use: ['@svgr/webpack'],
        },
        {
          type: 'asset',
          resourceQuery: /url/,
        },
        {
          use: [fileLoaderRule.loader, ...fileLoaderRule.options ? [{ options: fileLoaderRule.options }] : []].filter(Boolean),
            exclude: [
                /\.(js|ts|jsx|tsx|md|mdx)$/,
                /node_modules\/(?!@something\/shared-ui)/,
            ]
        },
      ],
    });

    fileLoaderRule.exclude = /@something\/shared-ui\/src/;

    return config;
  },
};

* We're using oneOf to apply different rules to SVG imports. * issuer: Checks where the SVG is being imported from. This lets us treat your monorepo source files differently. * resourceQuery: It checks if the svg import ends with ?url. * The first rule in oneOf uses @svgr/webpack for your monorepo's source files (during development). You'll need to install it: pnpm add @svgr/webpack -D * The second rule in oneOf handles svg imports, when svg files end with ?url. * The third handles all other cases, using Next.js image features. * fileLoaderRule.exclude: We exclude your monorepo's source directory from the original SVG rule, so Next.js's default handling doesn't interfere.

4 replies

TTCTheo's Typesafe Cult

•Created by Jakov on 3/22/2025 in #questions

Buying domain

Thanks 🙂

5 replies

CDCloudflare Developers

•Created by Jakov on 10/22/2024 in #pages-help

Cloudflare ignores NODE_VERSION

I'm bumping

27 replies

CDCloudflare Developers