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
│ │ ├── ...
│ │ ponents
│ │ ├── ...
├── 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?
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
│ │ ├── ...
│ │ ponents
│ │ ├── ...
├── 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?
Share Improve this question edited Aug 11, 2021 at 13:58 juliomalves 50.5k23 gold badges177 silver badges168 bronze badges asked Aug 11, 2021 at 8:47 aiwaiw 851 gold badge2 silver badges7 bronze badges2 Answers
Reset to default 7Unfortunately, it seems Next.js officially supports only ./pages
or ./src/pages
directories. Tim explains his point of view over this decision in his ment 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.
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",