Next.js Project Explanation

In the previous chapter, we learned about the basic structure of a Next.js project. This chapter will dive deeper into some key files and concepts to help you better understand and configure your Next.js application.

`next.config.js`

next.config.js is the main configuration file for Next.js, allowing you to customize Next.js behavior. It's a Node.js module, so you can write configurations using JavaScript.

A basic next.config.js file looks like this:

javascript

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

reactStrictMode: Enables React's strict mode to help identify potential issues.

You can configure many advanced options through next.config.js, such as:

Environment Variables: Configure environment variables via the env field.
Redirects and Rewrites: Use redirects and rewrites to configure URL redirects and proxies.
Custom Webpack Configuration: Modify Webpack configuration via the webpack field.
Image Optimization: Configure the images field to specify allowed image domains, etc.

`_app.js`

pages/_app.js is a special file that serves as the root component for all pages. Next.js uses this component to initialize pages. You can perform the following operations here:

Add Global Styles: Import global CSS files.
Shared Layouts: Create layout components shared across all pages (such as navigation bars and footers).
Inject Data: Use getInitialProps to inject common data for all pages.
State Management: Integrate state management libraries like Redux, MobX, or React Context.

A typical _app.js file looks like this:

jsx

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Component: The current page's component.
pageProps: Props passed to the page component.

`_document.js`

pages/_document.js is another special file that allows you to customize the HTML document returned by the server. This only runs on the server side; don't add application logic here.

Main uses include:

Modify <html> and <body> Tags: Add attributes like lang and class.
Integrate CSS-in-JS Libraries: Configure server-side rendering for libraries like styled-components or emotion.
Add Custom Fonts or Scripts.

A basic _document.js file looks like this:

jsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

<Html>, <Head>, <Main>, and <NextScript> are built-in components provided by Next.js and must be used in this structure.

Environment Variables

Next.js has built-in support for environment variables to help you manage configurations across different environments (development, production).

.env.local: Variables for local development environment, not committed to Git.
.env.development: Development environment variables.
.env.production: Production environment variables.

Next.js automatically loads the appropriate .env file based on the current environment.

Accessing environment variables in code:

Server-Side: You can directly use process.env.MY_VARIABLE.
Client-Side: Only variables prefixed with NEXT_PUBLIC_ are accessible in the browser, e.g., process.env.NEXT_PUBLIC_API_URL.

Absolute Paths and Module Aliases

To avoid relative paths like ../../.. in deeply nested components, Next.js supports configuring absolute paths and module aliases.

Configure baseUrl and paths in jsconfig.json (JavaScript projects) or tsconfig.json (TypeScript projects):

json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

After configuration, you can import modules like this:

jsx

import MyComponent from '@/components/MyComponent'
import styles from '@/styles/Home.module.css'

This makes the code cleaner and easier to maintain.

Summary

This chapter covered some key files and configurations in a Next.js project, including next.config.js, _app.js, _document.js, environment variables, and module aliases. Mastering these will help you better customize and extend your Next.js application.

Previous Chapter: Next.js Project Structure | Next Chapter: Next.js Pages and Routing

Next.js Project Explanation ​

next.config.js ​

_app.js ​

_document.js ​

Environment Variables ​

Absolute Paths and Module Aliases ​