CODEWITHSUNDEEP
javascriptnext.js
aiw
aiw

Reputation: 85

How set a custom directory for pages in Next JS? (not src or root)

I'm encountering a problem when set a custom directory in Next JS.

I know that by default, the pages directory should be in root or the src directory, but this option doesn't suit me because I can't hide all the frontend files in one directory.

Instead i want to do it this way:

src
├── frontend
│   ├── pages
│   │   ├── index.tsx                         
│   │   ├── firstPage.tsx                     
│   │   ├── ...
│   │   components
│   │   ├── ...                   
├── backend
│   ├── ...

However Next JS doesn't allow me to do this and I don't understand why, I've tried looking for possibilities for this, e.g:

 "scripts": {
    "dev": "next ./src/frontend",
  },

This works, but it's still not what I need. With this approach, next creates tsconfig, .next, etc directly in the frontend directory, which looks weird, I would like to keep the configuration files in the root directory.

It seems that for some reason I can't have pages directory inside frontend directory, but I can't figure out what this has to do with. If this is really the case could you tell me why?

Upvotes: 9

Views: 6936

Answers (2)

Gopinath Kaliappan
Gopinath Kaliappan

Reputation: 7369

We cannot set custom pages in next.js , but after some research i found the way to change which folder should act as pages/ ,

Like for example if i have multiple apps like , cars/ , bikes/ , we cannot make next.js to choose the cars/ or bikes/ , but i am making which folder should act as pages/

So here is the steps

setup below gulp devDependencies in your project

"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
"gulp-fs": "^0.0.2",
"gulp-rename": "^2.0.0",

Create gulpfile.js with following content

const gulp = require('gulp')
const fs = require('fs')
var clean = require('gulp-clean')
gulp.task('clean-pages', function () {
  return gulp.src('pages/', { read: false }).pipe(clean())
})
gulp.task('eject-pages', function () {
  return gulp.src('./pages/**/*.{js,tsx,ts,scss}').pipe(gulp.dest('./simba'))
})
gulp.task('serve-cars', function () {
  return gulp.src('./cars/**/*.{js,tsx,ts,scss}').pipe(gulp.dest('./pages'))
})
gulp.task('serve-bikes', function () {
  return gulp.src('./bikes/**/*.{js,tsx,ts,scss}').pipe(gulp.dest('./pages'))
})
gulp.task('bikes', gulp.series('eject-pages', 'clean-pages', 'serve-bikes'))
gulp.task('cars', gulp.series('clean-pages', 'serve-cars'))

it will replace which the pages folder with cars or bikes

in package.json add scripts

"build-cars": "gulp cars && next build",
"build-bikes": "gulp bikes && next build",

Upvotes: -2

Silencesys
Silencesys

Reputation: 565

Unfortunately, it seems Next.js officially supports only ./pages or ./src/pages directories. Tim explains his point of view over this decision in his comment in one of many issues requesting this option on Github see. More can be found also here and here.

However, you might want to check out this discussion, as Daniel's fork has option to look for pages in additiona directories.

Upvotes: 7

Related Questions