Skip to content

[internal] Create shared Next.js baseline config#34259

Merged
oliviertassinari merged 4 commits intomui:masterfrom
oliviertassinari:create-baseline-next-config
Sep 17, 2022
Merged

[internal] Create shared Next.js baseline config#34259
oliviertassinari merged 4 commits intomui:masterfrom
oliviertassinari:create-baseline-next-config

Conversation

@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Sep 11, 2022

The current configuration leads to this bug:

Screenshot 2022-09-11 at 01 24 53

So instead, I have created a function to extend a Next.js configuration file. It's similar to https://github.com/martpie/next-transpile-modules/blob/master/src/next-transpile-modules.js. It was suggested in mui/toolpad#866 (comment). I have used the opportunity to normalize how we use env tokens based on mui/toolpad#809 (comment).

https://deploy-preview-34259--material-ui.netlify.app/

This change should unlock:

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation. internal Behind-the-scenes enhancement. Formerly called “core”. labels Sep 11, 2022
@oliviertassinari oliviertassinari requested a review from a team September 11, 2022 00:16
@mui-bot
Copy link

mui-bot commented Sep 11, 2022

No bundle size changes

Generated by 🚫 dangerJS against 2cbf834

@oliviertassinari oliviertassinari force-pushed the create-baseline-next-config branch from 994779a to a89f98c Compare September 11, 2022 09:35
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
import CONFIG from 'docs/src/config';

const NEWSLETTER_SUBSCRIBE_URL =
Copy link
Member

@Janpot Janpot Sep 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to avoid passing DEPLOY_ENV to the application code entirely, and instead calculate these options centrally, in the next.js baseline config?

env: {
  NEWSLETTER_SUBSCRIBE_URL: isProduction ? '...' : '...',
  GA_ID: isProduction ? 'UA-106598593-2' : 'UA-106598593-3',
  GA_SAMPLING_RATE: isProduction ? 80 : 100,
  ENABLE_TOOLPAD: isProduction,
  // ...
}

Copy link
Member Author

@oliviertassinari oliviertassinari Sep 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to avoid passing DEPLOY_ENV to the application code entirely

@Janpot What's the value of this change? I understand the value of this indirection for secrets and constants used multiple times, but I don't get it for the rest. My goal in removing docs/src/config was to centralize the logic as much as possible in the same files.


A side note. I would also be in favor of removing docs/src/route. The values feel no different from using the URLs directly.

Copy link
Member

@Janpot Janpot Sep 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the value of this change?

It's not critical at all, it would mostly improve maintainability a bit and be more defensive code.

  • It creates a natural overview of which features are enabled for which environment. This is especially handy when a new environment has to be defined (e.g. new type of integration tests)

  • Injects the environment specific flags through the webpack define plugin. This prevents future maintainers from accidentally creating code that doesn't minify unused configuration away. e.g.

    // Minifies to `const NEWSLETTER_SUBSCRIBE_URL = 'url a'`
    const NEWSLETTER_SUBSCRIBE_URL = process.env.DEPLOY_ENV === 'production' ? 'url a' : 'url b'
    
    // Minifies to 
    //   const isProd = () => true
    //   const NEWSLETTER_SUBSCRIBE_URL = isProd() ? 'url a' : 'url b'
    const isProd = () => process.env.DEPLOY_ENV === 'production'
    const NEWSLETTER_SUBSCRIBE_URL = isProd() ? 'url a' : 'url b'
    
    // Injecting process.env.NEWSLETTER_SUBSCRIBE_URL directly prevents this from ever happening
  • Avoids duplicating logic in case a certain flag is used in multiple places in the application. Or when the same flag is used between build time and run time

I would also be in favor of removing docs/src/route. The values feel no different from using the URLs directly.

Yes, it's not critical neither. For me, the main advantage of such a file would be around static analyzability of where certain links are used. Especially when people start defining links like /section-${sections.slug} in one place and /section-intro in others. Such constructs are hard to search for. If you use something like a sectionLink('intro') everywhere that could be easily listed using "find references" in vscode

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's minor, I'm more than fine for this PR to be merged as is

@oliviertassinari
Copy link
Member Author

It has been a week, I'm merging.

@oliviertassinari oliviertassinari merged commit 174076b into mui:master Sep 17, 2022
@oliviertassinari oliviertassinari deleted the create-baseline-next-config branch September 17, 2022 12:11
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
@oliviertassinari oliviertassinari changed the title [core] Create shared Next.js baseline config [internal] Create shared Next.js baseline config Feb 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation. internal Behind-the-scenes enhancement. Formerly called “core”.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants